Снег на сайт

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

 

Вариант второй

Скачиваем и подключаем библиотеку Snowfall2020JS

Пишем код как правило в футоре.

PHP JQuery

<!--Скрипты снежинок-->
<?php
$start_date = date ('2023-12-01');
$finish_date = date ('2024-01-14');

$nowdate=date('Y-m-d');
if ((($nowdate >= $start_date) && ($nowdate <= $finish_date))) {
?>

<script src="/wp-content/themes/vseskupki/assets/js/snowfall2020.js"></script>
<script>
var style = document.createElement('style');
style.innerHTML = `
  .sf-snow-flake {
    position: fixed;
    top: -20px;
    z-index: 99999;  }
  .sf-snow-anim {
    top: 110%;  }
  `;
document.head.appendChild(style);
</script>

<?php
}
?>

 

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

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

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

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