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