Снег на сайт

Для реализации снега на сайте воспользуемся простой библиотекой 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>

 

Так же с моим портфолио можно ознакомиться на любой из представленной социальной сети, на своих страницах я публикую посты о своих работах, заданиях и целях.

Для связи со мной можно воспользоваться любой социальной сетью,
или написать на почту:

С моим резюме можно ознакомиться по ссылке:

© 2020-2023 Портфолио Юдина Александра г.Пенза. Все права защищены