Пиксельный снег с параллакс эффектом на CSS3 и HTML5 Canvas
|
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 |
.snow { -webkit-animation-name: move; animation-name: move; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; height: 100vh; position: absolute; left: 0; top: 0; width: 100vw; z-index: -1; } .snow:nth-of-type(1) { -webkit-animation-duration: 4s; animation-duration: 4s; } .snow:nth-of-type(2) { -webkit-animation-duration: 4s; animation-duration: 4s; } .snow:nth-of-type(3) { -webkit-animation-duration: 9s; animation-duration: 9s; } @-webkit-keyframes move { from { background-position: 0 0; } to { background-position: 0 100vh; } } @keyframes move { from { background-position: 0 0; } to { background-position: 0 100vh; } } |
|
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 |
<div class="snow"></div> <div class="snow"></div> <div class="snow"></div> <script > var generateCanvasImageUrl = function generateCanvasImageUrl() { var _window = window, innerHeight = _window.innerHeight, innerWidth = _window.innerWidth; var pixels = innerHeight / 1 * (innerWidth / 1); var $canvas = document.createElement('canvas'); var context = $canvas.getContext('2d'); $canvas.height = innerHeight / 1; $canvas.width = innerWidth / 1; for (var pixel = 0; pixel < pixels; pixel++) { var x = pixel % innerWidth; var y = Math.floor(pixel / innerWidth); var size = Math.floor(Math.random() * 3 + 1); context.fillStyle = '#fff'; if (Math.random() > 0.9999) context.fillRect(x, y, size, size); } return $canvas.toDataURL(); }; var $snowSlides = document.querySelectorAll('.snow'); var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; try { for (var _iterator = $snowSlides[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { var $slide = _step.value; $slide.style.background = 'url(' + generateCanvasImageUrl() + ')'; } } catch (err) { _didIteratorError = true; _iteratorError = err; } finally { try { if (!_iteratorNormalCompletion && _iterator.return) { _iterator.return(); } } finally { if (_didIteratorError) { throw _iteratorError; } } } </script> |
