html5白天和黑夜场景切换动画特效免费下载

挺好看的一个html5白天和黑夜场景切换动画特效,基于html5 svg属性实现白天黑夜场景交替切换动画效果。

JS代码

<script src="js/TweenMax.min.js"></script> 
<script> 
var select = function(s) { 
    return document.querySelector(s); 
  }, 
  selectAll = function(s) { 
    return document.querySelectorAll(s); 
  }, 
    hit = select('.hit'), 
    allStars = selectAll('.starGroup *'), 
    allClouds = selectAll('.cloud'), 
    allCloudPuffs = selectAll('.cloud circle') 
     
   
 
TweenMax.set('svg', { 
  visibility: 'visible' 
}) 
TweenMax.set(allStars, { 
 transformOrigin:'50% 50%' 
}) 
TweenLite.defaultEase = Elastic.easeOut.config(0.58,0.8); 
var tl = new TimelineMax({paused:true}); 
tl.staggerTo(['.sun', '.moonMask', '.moon'], 1, { 
 cycle:{ 
  attr:[{cx:'-=140', cy:'-=20'}, {cx:'-=140', cy:'-=20'}, {cx:'-=90',  cy:'-=0'}] 
 } 
},0) 
 
.staggerTo(['.moon', '.sun'], 1, { 
 cycle:{ 
  alpha:[1, 0] 
 } 
},0,'-=1') 
.to('body', 1, { 
 //backgroundColor:'#2C3E7B' 
},'-=1') 
.to('.outline', 1, { 
 stroke:'#6172AD', 
 fill:'#45568D' 
},'-=1') 
 
.staggerFrom(allStars, 0.9, { 
 cycle:{ 
  x:[-20, 30, 40, -30, 60, -40, 80, 90, 100, 110, 120] 
 }, 
 alpha:0 
},0.005,'-=1') 
 
.staggerTo(allClouds,1, { 
 cycle:{ 
  x:[40, 20] 
 }, 
 alpha:0 
},0,'-=1') 
 
.addPause() 
 
 
.staggerTo(['.sun', '.moonMask', '.moon'], 1, { 
 cycle:{ 
  attr:[{cx:'+=140', cy:'+=20'}, {cx:'+=140', cy:'+=20'}, {cx:'+=90',  cy:'+=0'}] 
 } 
},0) 
.staggerTo(['.moon', '.sun'], 1, { 
 cycle:{ 
  alpha:[0, 1] 
 } 
},0,'-=1') 
.to('body', 1, { 
 //backgroundColor:'#26D6FE', 
 ease:Linear.easeNone 
},'-=1') 
.to('.outline', 1, { 
 stroke:'#FCFDFE', 
 fill:'#85E8FE' 
},'-=1') 
.staggerTo(allStars, 1, { 
 alpha:0 
},0,'-=1') 
.staggerFromTo(allClouds, 0.6, { 
 cycle:{ 
  y:[120, 160], 
  x:[0] 
 } 
}, 
{ cycle:{ 
  y:[0], 
 x:[0] 
 }, 
 alpha:1, 
 immediateRender:false 
},0.06,'-=1') 
 
 
.from(['.plane', '.contrail'], 0.7, { 
 x:-400, 
 ease:Linear.easeNone 
},'-=1') 
 
.to('.contrail',0.5, { 
 alpha:0, 
 ease:Sine.easeOut 
}) 
 
 
 
//ScrubGSAPTimeline(tl); 
 
function clickToggle(e){ 
if(tl.time() > 0 && tl.time() < tl.duration()){ 
 tl.play() 
} else{ 
 tl.play(0) 
} 
} 
 
tl.timeScale(0.7) 
hit.onclick = clickToggle; 
//TweenMax.globalTimeScale(0.5)</script>
恭喜,此资源为免费资源,请先
本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
打赏
下载价格:免费
下载说明:本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有! 若您需要使用非免费的软件、源码或服务,请购买正版授权并合法使用! 本站发布的内容若侵犯到您的权益,请联系站长删除,我们将及时处理! 本站所有资源均是收集而来,资源均不包含技术支持和安装服务!点击下载视为同意资源仅限学习使用。
0

评论0

请先

没有账号? 忘记密码?

社交账号快速登录