Пример:
HTML:
|
1 |
<canvas id="bg-img"></canvas> |
CSS:
|
1 2 3 4 5 6 |
#bg-img { background: url(background.jpg); background-position: center center; background-size: cover; width: 100%; } |
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 50 51 52 53 54 55 |
var n = 900, c = document.getElementById("bg-img"), ctx = c.getContext("2d"), cw = (c.width = c.offsetWidth); ch = (c.height = 500); duration = ch/850, img = new Image(), particles = [], particleNumber = 0, Particle = function() { this.alpha = rand(0.1, 0.4); this.size = rand(60, 70); this.draw = function() { ctx.globalAlpha = this.alpha; ctx.drawImage(img, this.x, this.y, this.size, this.size); } }; function setParticle(p) { particleNumber++; var _dur = rand(duration/2, duration), _tl = new TimelineMax() .fromTo(p, _dur, { x:rand(-p.size, cw+ch/2), y:-p.size },{ x:'-='+rand(ch/2-50,ch/2), y:ch+p.size, ease:Power0.easeNone, onComplete:function(){ setParticle(p); } }); if (particleNumber<n) _tl.seek(_dur*rand()); } for (var i=0; i<n; i++) { particles.push(new Particle()); setParticle(particles[i]); } TweenMax.ticker.addEventListener("tick", function(){ ctx.clearRect(0, 0, cw, ch); for (var i=0; i<n; i++) { particles[i].draw(); } }); window.addEventListener('resize', function() { particleNumber = 0; cw = (c.width = c.offsetWidth); ch = (c.height = 500); for (var i=0; i<n; i++) { TweenMax.killTweensOf(particles[i]); setParticle(particles[i]); } }); function rand(min=0, max=1) { return min + (max-min)*Math.random(); } img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEQAAABECAMAAAAPzWOAAAAAclBMVEVHcEz///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9wvwjfAAAAJnRSTlMADzQ3BxsfAQIKBBYFX5UsEjxPan6QJ0NJJCkUcXgvhVRZSkCKZM5koNQAAAFNSURBVHgB3ZWFkcRADARvUVozM9uXf4p/GTyMil4BTLnHvdLrN0OJfcHDs8JD7BTgDCq2CKfxHeE0W4zTzBqvJOomhkOCdgTTxEaCJv9HNCxAQzI0pcS/2URo8FqdsQIf4vFanYQkuYDythSgKYYCpxkHK0CjWYDGE658r3DT+i3Bla8cTJOYHtdVVbiuPB749Uz6AaYhdRrCH3A64spfp8IlSXsBSeqO4FqrN04z1pXFN8mqI/h4nouHaaYlhbdruJveojQuXTeGlV9rz6gk134oAkN83ZQBDLGmWToLhrhzTx1YSZQv+zBjITRX+6oDoba29QRWoq4nS32CNTLW2YNWEu49Ww2mWuTfWZuClgTTZO3hoEo4Ptp2KQuoEqubD80EWUJFmmVP5aFK2NVZ25RFBJ6bZj18YHAx3qULTOhWm+GMzzCe8ZmfZ3wBUXcSquSL1HAAAAAASUVORK5CYII="; |
Где:
n - Кол-во капель
ch - Высота блока
cw - Ширина блока.
img.src - Капля в base64
Фон канваса задается через CSS
Найдено на codepen.io у пользователя Tom Miller
Автор фотографии xusenru
Добавить комментарий: