Снег, который реагирует на курсор и скапливается в сугробы над ним by @neave на CSS3 и Javascript
Классный снежок для вашего сайта. Он умеет менять направление при движение мышки и, если долго не шевелить курсором, над ним скопится небольшой сугроб
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS поместите:
|
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 |
.snowflake { position: absolute; display: block; position: absolute; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-user-select: none; -moz-user-select: none; user-select: none; background-image: -webkit-radial-gradient( center, circle farthest-corner, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100% ); background-image: -moz-radial-gradient( center, circle farthest-corner, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100% ); background-image: -ms-radial-gradient( center, circle farthest-corner, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100% ); background-image: radial-gradient( center, circle farthest-corner, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100% ); } #snow { position: absolute; width: 100%; height: 100%; } |
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 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<div id="snow"></div> <script type="text/javascript"> // Happy Xmas! by @neave var Snowflake = (function() { var flakes; var flakesTotal = 250; var wind = 0; var mouseX; var mouseY; function Snowflake(size, x, y, vx, vy) { this.size = size; this.x = x; this.y = y; this.vx = vx; this.vy = vy; this.hit = false; this.melt = false; this.div = document.createElement('div'); this.div.classList.add('snowflake'); this.div.style.width = this.size + 'px'; this.div.style.height = this.size + 'px'; } Snowflake.prototype.move = function() { if (this.hit) { if (Math.random() > 0.995) this.melt = true; } else { this.x += this.vx + Math.min(Math.max(wind, -10), 10); this.y += this.vy; } // Wrap the snowflake to within the bounds of the page if (this.x > window.innerWidth + this.size) { this.x -= window.innerWidth + this.size; } if (this.x < -this.size) { this.x += window.innerWidth + this.size; } if (this.y > window.innerHeight + this.size) { this.x = Math.random() * window.innerWidth; this.y -= window.innerHeight + this.size * 2; this.melt = false; } var dx = mouseX - this.x; var dy = mouseY - this.y; this.hit = !this.melt && this.y < mouseY && dx * dx + dy * dy < 2400; }; Snowflake.prototype.draw = function() { this.div.style.transform = this.div.style.MozTransform = this.div.style.webkitTransform = 'translate3d(' + this.x + 'px' + ',' + this.y + 'px,0)'; }; function update() { for (var i = flakes.length; i--; ) { var flake = flakes[i]; flake.move(); flake.draw(); } requestAnimationFrame(update); } Snowflake.init = function(container) { flakes = []; for (var i = flakesTotal; i--; ) { var size = (Math.random() + 0.2) * 12 + 1; var flake = new Snowflake( size, Math.random() * window.innerWidth, Math.random() * window.innerHeight, Math.random() - 0.5, size * 0.3 ); container.appendChild(flake.div); flakes.push(flake); } container.onmousemove = function(event) { mouseX = event.clientX; mouseY = event.clientY; wind = (mouseX - window.innerWidth / 2) / window.innerWidth * 6; }; container.ontouchstart = function(event) { mouseX = event.targetTouches[0].clientX; mouseY = event.targetTouches[0].clientY; event.preventDefault(); }; window.ondeviceorientation = function(event) { if (event) { wind = event.gamma / 10; } }; update(); }; return Snowflake; }()); window.onload = function() { setTimeout(function() { Snowflake.init(document.getElementById('snow')); }, 500); } </script> |
