Пример:
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
var n = 999, //кол-во снежинок speed = 3, // скорость wind = 500, // наклон снежинок windVariance = 1.5, // отклонение снежинок, 1 = без отклонения c = document.getElementById("bg-img"), ctx = c.getContext("2d"), cw = (c.width = c.offsetWidth); ch = (c.height = 500); img = new Image(64,64), particles = [], particleNumber = 0, Particle = function(index) { this.size = rand(5, 10); this.dur = (15-this.size)/speed; this.alpha = rand(0.25, 0.75); if (index<n/100) { this.size = rand(150,200); this.dur = this.dur/4; this.alpha = this.alpha/3.3; } else if (index<n/10) { this.size = rand(19,33); this.dur = this.dur/2.5; this.alpha = this.alpha/1.5; } var rot = -rand(3,5); if (index%4==0) rot= -rot; this.draw = function() { ctx.translate( this.x, this.y ); ctx.rotate(rot*this.progress); ctx.globalAlpha = this.alpha; ctx.drawImage(img, -this.size/2, -this.size/2, this.size, this.size); ctx.rotate(-rot*this.progress); ctx.translate( -this.x, -this.y ); } }; function setParticle(p) { particleNumber++; var _tl = new TimelineMax() .fromTo(p, p.dur, { x:rand(-Math.abs(wind), (cw + Math.abs(wind))), y:-p.size, progress:0 },{ x:'+='+String( rand(wind/windVariance, wind*windVariance)), y:ch+p.size, progress:1, ease:Power0.easeNone, onComplete:function(){ setParticle(p); } }); if (particleNumber<n) _tl.seek(p.dur*rand()); } for (var i=0; i<n; i++) { particles.push(new Particle(i)); 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,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAulBMVEVHcEz////+/v7////+/v79/f3////x8fH9/f3+/v7+/v7////+/v7////////////////////////////////////////////////+/v7///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+MnUWcAAAAPnRSTlMACQ4GBAoWAQMCDRMQJSIfOlQICxgdSkFyG09hXDcrKUeMLZKgsmmnPoIaL2aHWH4xbaw0d0S8wXu3m5cymMmy7QsAAAVDSURBVHgBzZd3g6JKEMQP99BbzoSYs5jFHDbq9/9ar6qb4aHLxr+uX7jYP6pqmKHn179VGa37sDLyO1/u/aW9f1C/tfAzYr4GYa+23sVLMF9h8OFhd6lkWZZt2/h/qSQMCvmEQNt/+ES0eg4qlUo5KcfxPMvib3+KwOPZz+5UNpv9GxZ+CggZnyDon+JtL4XudDpdDitNCBCwEmbxTgBID97xeHSXF41KQapSqTTKZTBSjk3E72SCAJCe5aXwdHbnc6by+UJlAR1AeEZFAgL9EOA57K8Ucrle1/cDlu/3cjkwFGFzSeTNeBsB+m3tz+d6fnA+dIqszuEc+D0gGjSS9ZAmjdz/yrwFiIEy+wN0z2a12ulUq81mxc6ZCBgBwrETfWS4BBYFNPK57hbtp361Wm028b/+qWYQDfrwiKCPWwATSC8KeH6nWOtXm67rrtdr1wWlbxANRqEiqOEWkKKAnn9gv+u22y2pdttVROAzChFhqYbMdQSOJNDbdmb9prtut5aTyW63myyXLUHMioeAPpCEEO6o4RYAB91z8VR112jf1etHVL2+A2LdrJ5mRfgAIa0EJhkH2BqBLwLay139+LTZzOfzzdNREC59HEJC1ivRxK0CRhAQsG5Ndsen+Wo1GAxWKzCIgIiIIEn+ZgoJgFpVBKB/MJQaAHGsT1prVwg5SdKhiY8Axw36X19Yr0RAhBLOXRAogSuRiS8jQ8znQgAEDIaXEWo6GhGhhCZy2NIEcyQgc/0elAshYCKAl9F0ut/vp9PRCwlw4Tb7M5pYpNVDBMhEAN8AVoPXEdrHqD0IryDsllgLlYClZIyxEO6wjgyhe5j1xcJqCAD6n5+fx2PVcKSJU/HQzf3v4Wo3Sop4kZrr5Q4WXgh4fnh4AGIPwuqpTgmzDj0o4P4a4EQhtHbH+eACAPofH4GAhldKQArigesQBzAEXcgcPTAEhDiajp/RTwJyEAni4cwQuJBXAB5pXMheIB4YwgssAIASCcPBhh6wDt1bAD2Q4PxNV3K+8YAQmEEEeAVg8iHgDhIQ41YlbFYxD2EIBpB7A5AvCyWUIwlPRkIsxbgCz7oGyLnopcxKtkMJJLA/buGcAIjtqHgKF32X0B+9CM0+VsEA9FWOr4SHU8VI4EKQAAQ2BB086asY9Pgi2SXZC/GiBLMQ3BDHDQmjKYvv8oYvUrXWCXKFchKAO6IUe59pAjviZYRiPx0wgo7PveDEt0L8aNQ9qVsKK8Fj5XK58FChgDUiQIaNhAz1ZVAPfBd0V/Ng4sk2YH892s4EwMEtQHc1Pw/YETShZ+t8hQqPxaY4YAQez0TT+OZ01uMdBDnecb4/PbE/dp6YvZjgwYOE6Hxv8wPD2u3YHwpIdhDf1QuYOHdq/Ma18JFCLVvSTwFcg6wNB8mTin5l9SMnX+l1u43mdnvNfp5nZismAbgpS3ZsUCCi6bKa8nXsBL08IqSDhAjMsWBzVCEhOBRnNc4aMmic5APNBLAGpUQBGiNnDRIwbPhnjEpm2MHAFIiBv3oWJANEg+V50by1PRw6HLg6ncPWlwFBBHwMgAtOnGUOjDLxbbfbANOaGZQcAmjhI4IOnUCAIaUD4yKacbgTk1PQsddCEBx7G2Tk0YyZlXMvB072y1ZOJpjB23IgAkbKjUajwlpczbz3H96b7nnzsGwgyDClk7stApjhBwhzfdD7gyk+nZP/Z/3GB0RQhm17nqPl2XZJp+XPAGY9yOAdSquEbrZzRPwKgCrkHkaMFrvjd5/PEfFrJJvNRfK7d1lzk9X6+ZWY19t/sP4DoePqp9agWnMAAAAASUVORK5CYII="; |
Где:
n
- Кол-во снежинок
speed
- Их скорость.
wind
- Ветер (наклон снежинок)
windVariance
- Отклонение снежинок, 1 = без отклонения.
ch
- Высота блока
cw
- Ширина блока.
img.src
- Снежинка в base64
Фон канваса задается через CSS
Заменив изображение img.src
, с неба могут падать смайлики, наковальни и другие предметы.
Найдено на codepen.io у пользователя Tom Miller
Автор фотографии cgcowboy
Добавить комментарий: