Скрипт реализующий данную анимацию работает на библиотеке TweenMax
Пример:
HTML:
|
1 2 3 4 5 6 7 8 |
<div class="ocean-bd"> <div id="ocean"> <div id="water"></div> <div class="bird bird1"></div> <div class="bird bird2"></div> <div class="bird bird3"></div> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.ocean-bd { background:linear-gradient(to top, rgb(255,255,255) 55%, rgb(110,215,255) 80%, rgb(75,100,255) 130%); overflow: hidden; } #ocean { width: 100%; height: 400px; } #ocean * { position: absolute; user-select: none; } |
JS:
Подключаем библиотеку TweenMax.min.js и скрипт самого эффекта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
var c = document.getElementById('ocean'), water = document.getElementById('water'), n = 55; new TimelineMax() .set(c, {minWidth:3200, width:'200%', height:400, backgroundImage:'url(fog-1.webp)'}, 0) .set(water, {width:'110%', height:220, left:'-20%', bottom:-50, perspective:500}, 0) .set('.bird', {width:60, left:-60, height:60, backgroundImage:'url(bird.png)'}, 0) .set('.bird1', {scale:0.7, top:100}, 0) .set('.bird2', {scale:0.65, top:37}, 0) .set('.bird3', {scale:0.6, top:59}, 0) .from(c, 1, {opacity:0, ease:Power1.easeInOut}, 0) .from(c, 15, {backgroundPosition:'0px 999px', repeat:-1, ease:Power0.easeNone}, 0) .staggerFrom('.bird', 0.65, {backgroundPosition:'0px -840px', ease:SteppedEase.config(14), repeat:40}, 0.2, 0) .staggerFrom('.bird', 20, {x:3200, cycle:{y:[-10,125,53]}, rotation:1, ease:Power0.easeNone}, -0.4, 0) .call(function(){moveTL.progress(0.5)}, null, null, 0); for (var i=0; i<n; i++){ var b = document.createElement('div'); b.className += 'box'; water.appendChild(b); new TimelineMax() .set(b, { width:'100%', height:50, y:i*6.5, backgroundImage:'url(water.jpg)', backgroundPosition:'0px -'+String(i*5)+"px", transformOrigin:'50% 0%' }, 0) .to(b, 2, { y:'-='+String(2*(i/n*60)), scaleX:0.95+i/n*0.2, scaleY:2-i/n, rotation:0.01, yoyo:true, repeat:-1, ease:Sine.easeInOut }, i/n) .to(b, 2.6, { x:'-='+String(100*(i/n*2)), yoyo:true, repeat:-1, ease:Sine.easeInOut }, i/n) } var moveTL = new TimelineMax({paused:true}) .to(c, 1, {x:'-=1200', ease:Power0.easeNone}, 0); window.addEventListener('mousemove', function(e){ TweenMax.to(moveTL, 1, {progress:e.clientX/window.innerWidth}) }); |
В скрипте используются 3 картинки
Найдено на codepen.io у пользователя Tom Miller
Библиотека TweenMax
Добавить комментарий: