Снегопад на базе particles.js
Данный снегопад создан с помощью библиотеки particles. В качестве снежинки использована прозрачная картинка.
Для начала на страничку добавляем контейнер в котором и будет работать наш снегопад.
<div id="particles-js"></div>
Не забываем про стили
#particles-js{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 0;
overflow: hidden;
}
Важно помнить, что если вам не нужен снегопад по верх вашего сайта, а лишь на фоне, то в CSS нужно учесть порядок слоев (z-index)
В демо версии для шапки, контента и футера прописан z-index: 1, чтобы они располагались над слоем со снегом.
Подключаем js библиотеку
<script src="js/particles.min.js"></script>
И сам скрипт
particlesJS("particles-js", {
"particles": {
"number": {
"value": 400,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"shape": {
"type": "image",
"stroke": {
"width": 3,
"color": "#fff"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "../img/snowflake3.png",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.7,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 20,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 50,
"color": "#ffffff",
"opacity": 0.6,
"width": 1
},
"move": {
"enable": true,
"speed": 5,
"direction": "bottom",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 300,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": true,
"mode": "bubble"
},
"onclick": {
"enable": true,
"mode": "repulse"
},
"resize": true
},
"modes": {
"grab": {
"distance": 150,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 200,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.2
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
Путь к снежинке указывается в данной строке
./img/snowflake3.png
Демо можно посмотреть на соответствующей странице.
Всех с Наступающим!!!
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
bootstrap Bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Оцените работу движка