欢迎来到代码基地 请CTRL+D收藏本站!^_^
  • 最近浏览

    你还没有浏览商品

html5+TweenMax酷炫视频动画切换特效

2019-07-24 编辑:admin 下载:10 评论:0 点击:362 加入收藏 下载金币:10

html5+TweenMax基于video属性制作的酷炫全屏视频动画切换特效,默认获取两个视频,设置强度和过渡数值,进行酷炫的视频动画切换效果。修改:script.js文件即可,其余的都是配置文件。

html5+TweenMax酷炫视频动画切换特效



部分代码教程:

<script id="fragmentShader" type="x-shader/x-fragment"> 
 
varying vec2 vUv; 
uniform float dispFactor; 
uniform sampler2D disp; 
uniform sampler2D map1; 
uniform sampler2D map2; 
uniform float intensity; 
uniform bool direction; 
float random(vec3 scale,float seed) 
{ 
return fract(  sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453  +  seed  ); 
} 
 
void main() 
{ 
const float iterations = 25.;//float(quality+1)*25.; 
vec2 pos = vUv;//gl_FragCoord.xy / RENDERSIZE; 
vec4 color = vec4(0.); 
float total = 0.; 
vec2 toCenter = vec2(0.5, 0.5) - pos; 
float offset = random(  vec3(12.9898,78.233,151.7182), 0.  ); 
for(float t=0.; t<=iterations; t++) 
{ 
  float percent = (t+offset)/iterations; 
  float weight = 4.0*(percent-percent*percent); 
  vec4 sample1 = texture2D(map1, pos+toCenter*percent*intensity*dispFactor); 
  vec4 sample2 = vec4(0.0); 
  if(!direction) 
  { 
    sample2 = texture2D(map2, pos+toCenter*percent*intensity*(-1.0+dispFactor)); 
  } else { 
    sample2 = texture2D(map2, pos+toCenter*percent*intensity*(1.0-dispFactor)); 
  } 
 
  vec4 sample = mix(sample1, sample2, dispFactor); 
 
  sample.rgb *= sample.a; 
  color += sample*weight; 
  total += weight; 
} 
gl_FragColor = color/total; 
gl_FragColor.rgb /= max(gl_FragColor.a,0.00001); 
} 
</script> 
<script id="vertexShader" type="x-shader/x-vertex"> 
varying vec2 vUv; 
void main() { 
    vUv = uv; 
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); 
} 
</script>  
 
<script src='js/three.min.js'></script> 
<script src='js/TweenMax.min.js'></script> 
<script src='js/dat.gui.min.js'></script> 
<script src="js/script.js"></script>
  • ^_^ 本站原创案例有任何使用问题,可咨询管理员技术支持哦!VIP会员免金币或最低3折下载!