Реалистичный ливень на HTML5 Canvas + TweenMax
Классный реалистичный дождик для вашего сайта
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 |
canvas#c { display: block; background:url(/img/photo-1490903067048-95bc81fe6958.jpg); background-size:cover; background-position:bottom center; } |
2#: После открывающего тега <body> вставьте:
|
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 56 57 58 59 60 61 62 |
<script type="text/javascript" src="/js/TweenMax.min.js"></script> <canvas id="c"></canvas> <script type="text/javascript"> // Customize these... var n = 900; // ...not these var c = document.getElementById("c"), ctx = c.getContext("2d"), cw = (c.width = window.innerWidth), ch = (c.height = window.innerHeight), duration = ch/850, img = new Image(), particles = [], particleNumber = 0, Particle = function() { this.alpha = rand(0.1, 0.4); this.size = rand(60, 70); // px width + height 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()); //fast forward on first run } // First run 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 = window.innerWidth); ch = (c.height = window.innerHeight); 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="; </script> |
Осталось лишь залить картинку из прикреплённого архива в папку img и JS файл в папку js
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
Красиво, но тормозит
Какое железо?