Для реализации снега на сайте воспользуемся простой библиотекой snowfall.js.
Скачиваем ее snowfall.js.
Скачиваем png для снежинки (использовать можно любое изображение).
Теперь перед закрытием тега </body> (обязательное условие) вставим код:
Код
<!--Снег на сайте-->
<script src="assets/js/snowfall.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).snowfall({
flakeCount: 200,
image :"assets/img/snow.png",
minSize:3,
maxSize:15,
minSpeed:1,
maxSpeed:15,
round: true,
shadow: false,
});
});
</script>
Параметры можно изменять, без труда можно понять за что какой параметр отвечает. Незабываем также про правильные пути snowfall.js и snow.png.
Если нужно установить промежуток времени в течении которого снежинки будут на сайте каждый год, то воспользуемся вот таким кодом:
Код
<script src="js/snowfall.js"></script>
<script type="text/javascript">
var date = new Date();
//console.log (date);
//console.log (date.getMonth());
//console.log (date.getDate());
if (date.getMonth() === 11 && date.getDate() >= 26 ) {
$(document).snowfall({
flakeCount: 500,
image :"img/snow.png",
minSize:3,
maxSize:15,
minSpeed:1,
maxSpeed:15,
round: true,
shadow: false,
});
};
if (date.getMonth() === 0 && date.getDate() <= 14 ) {
$(document).snowfall({
flakeCount: 500,
image :"img/snow.png",
minSize:3,
maxSize:15,
minSpeed:1,
maxSpeed:15,
round: true,
shadow: false,
});
};
</script>