html5+TweenMax酷炫视频动画切换特效免费下载

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

JS文件

<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>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录