Скрипт падающего снега на сайт

Красивые эффекты падающего снега на jQuery, чистом JavaScript и CSS3

Теперь у вас есть возможность добавить на свой веб-сайт снежный эффект с использованием JavaScript. Да, теперь и на вашем сайте можно создать атмосферу снегопада!

JS-Скрипт снега для вашего сайта

Пусть будет снег 🙂

И вот наш сайт снова укрывается снегом в этот год, но на этот раз у нас есть для вас зимнее удивление!

Теперь и вы можете добавить на свой сайт снежный эффект всего лишь скопировав небольшой фрагмент кода.

Просто вставьте следующий код на выбор на свой сайт:

1 — jSnow универсальный снег на jQuery

<script src=«http://code.jquery.com/jquery-1.4.2.min.js»></script>

<script src=«/snow/jSnow.js»></script> <script> $(document).ready(function() { $(«body»).jSnow({ vSize: 100, // Размер области flakes: 30, // Количество снежинок flakeColor: [«#fff»], // Цвет flakeMinSize: 10, // Минимальный размер снежинки flakeMaxSize: 20, // Максимальный размер снежинки fallingSpeedMin: 1, // Минимальная скорость снежинки fallingSpeedMax: 2, // Максимальная скорость снежинки flakeCode:[«&bull;»] // Вид снежинки }); }); </script>

2 — Snowstorm умный скрипт

<script src=«https://www.schillmania.com/projects/snowstorm/snowstorm-min.js»></script> <script> window.onload = function() { snowStorm.snowColor = «#fff»; // Цвет снежинок snowStorm.flakesMaxActive = 100; // Максимальное количество видимых снежинок snowStorm.followMouse = true; // true — гоняться за курсором, false — нет snowStorm.snowCharacter = «&bull;»; // Вид снежинки }; </script>

скачать https://www.schillmania.com/projects/snowstorm/

3 — Snowfall снег с сугробами на jQuery

4 — Плавный многоуровневый эффект падающего снега на CSS3

<style>

.snowContainer { width: 100%; height: 100%; position: absolute; top: 0; left:0; z-index: —1; } #snow { width: 100%; height: 100%; background-image: url(«/snow/snow_1.png»), url(«/snow/snow_2.png»), url(«/snow/snow_3.png»); -webkit-animation: snow 20s linear infinite; -moz-animation: snow 20s linear infinite; -ms-animation: snow 20s linear infinite; animation: snow 20s linear infinite; } @keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-moz—keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-webkit—keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } @-ms—keyframes snow { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } }

</style>

<div class=«snowContainer»> <div id=«snow»></div> </div>

5. pure-snow

<script src="https://www.cssscript.com/demo/falling-snowflakes-pure/pure-snow.js" defer></script>

<div id="snow" data-count="200"></div>

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(white, white);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px white);
}

скачать https://github.com/hyperstown/pure-snow.js/archive/refs/heads/master.zip

демо https://www.cssscript.com/demo/falling-snowflakes-pure/

6. PureSnow

<script src="https://www.cssscript.com/demo/animated-snowfall-effect/PureSnow.js"></script>

<div id="snow"></div>

.snowflake {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(white, white);
  border-radius: 50%;
  filter: drop-shadow(0 0 10px white);
}

скачать https://www.cssscript.com/download/animated-snowfall-effect.zip

демо https://www.cssscript.com/demo/animated-snowfall-effect/

7. Снег для сайта на чистом CSS3

Еще одна анимация падения снега, полностью написанная на CSS/CSS3. Никаких изображений, холстов и сторонних библиотек не требуется.

<div class="snow"></div>
<div class="snow"></div>
<div class="snow"></div>

.snow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

.snow:nth-child(1) {
  opacity: 0.6064;
  transform: translate(56.5936vw, -10px) scale(0.1606);
  animation: fall-1 22s -16s linear infinite;
}
@keyframes fall-1 {
  34.585% {
    transform: translate(57.9903vw, 34.585vh) scale(0.1606);
  }
  to {
    transform: translate(57.29195vw, 100vh) scale(0.1606);
  }
}
.snow:nth-child(2) {
  opacity: 0.0623;
  transform: translate(38.6106vw, -10px) scale(0.3982);
  animation: fall-2 17s -21s linear infinite;
}
@keyframes fall-2 {
  70.443% {
    transform: translate(37.0175vw, 70.443vh) scale(0.3982);
  }
  to {
    transform: translate(37.81405vw, 100vh) scale(0.3982);
  }
}
.snow:nth-child(3) {
  opacity: 0.7242;
  transform: translate(18.1453vw, -10px) scale(0.9984);
  animation: fall-3 10s -24s linear infinite;
}
@keyframes fall-3 {
  71.78% {
    transform: translate(22.1161vw, 71.78vh) scale(0.9984);
  }
  to {
    transform: translate(20.1307vw, 100vh) scale(0.9984);
  }
}

скачать https://www.cssscript.com/download/snow-falling-animation.zip

демо https://www.cssscript.com/demo/snow-falling-animation/

Этот код нужно вставить в html-код вашего сайта между тегами <body> ... </body>.

Для различных CMS (чаще WordPress https://ru.wordpress.org/plugins/tags/snow/) есть готовые плагины как например WP Snow Effect, Tribulant Snow Storm, WFS Let It Snow, Snow Flurry, WP Super Snow

Пусть и на вашем сайте будет снег!

С наступлением первого снега 😉