Горный пейзаж с идущим снегом и Parallax эффектом на jQuery и HTML5 Canvas
Для начала посмотрите ДЕМО
Установка:
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 |
#snowfall { position: absolute; height: 99vh; width: 120%; left: -20%; top: 0px; } .fore-pic { height: 110%; width: 112%; top: -5% !important; left: -8% !important; } .fore-pic-mid { height: 110%; width: 110%; top: -5% !important; left: -5% !important; } .fore-pic-back { height: 110%; width: 110%; top: -3% !important; left: -5% !important; } |
2#: Перед закрывающим тегом /head вставьте:
|
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 |
<script src="/js/parallax.min.js"></script> <script src="/js/particles.min.js"></script> <script> $(function() { // ParallaxJS var scene = document.getElementById('scene'); var parallax = new Parallax(scene, { selector: '.layer' }); // Particle JS particlesJS("snowfall", { "particles": { "number": { "value": 200 }, "shape": { "type": "circle" }, "size": { "value": 2, "random": true }, "line_linked": { "enable": false }, "move": { "enable": true, "speed": 10, "direction": "bottom", "straight": true } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false } }, "modes": { "push": { "particles_nb": 2 } } } }); }); </script> |
3#: Перед открывающим тегом body вставьте:
|
1 2 3 4 5 6 |
<div id="scene" class="container"> <img src="/img/fore-3-min.png" data-depth="0.2" class="layer fore-pic-back" style="position: absolute;"> <img class="layer fore-pic-mid" src="/img/fore-2-min.png" data-depth="0.3" style="position: absolute;background-size: cover;background-attachement: fixed;display: none;"> <img class="layer fore-pic" src="/img/fore-min.png" data-depth="0.4" style="position: absolute;background-size: cover;background-attachement: fixed; display: none;"> </div> <div id="snowfall" data-depth="0.6" class="layer"></div> |
Осталось лишь залить два JS файла из прикреплённого архива в папку js и три картинки в папку img
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
