35 163 Скрипты / Other

SnowFall — Анимация падающего снега

Анимация падающего снега воспроизведенная на JQuery. Для анимации используется библиотека TweenMax от GreenSock. Снежинки имеют разное размытие, за счет чего достигается эффект объемности происходящего.

В демо примере показали, как можно применить такую анимацию только для заднего фона.

HTML

Сам снег добавляется в контейнер с ID
<div id="snow-animation-container"></div>

CSS

Стилей нет, само оформление снежинок формируется js скриптом. Мы управляем только контейнером, в который помещаются все снежинки.

JS

Для работы снега, нужно подключить библиотеки jQuery и TweenMax на страницу.
Мы подключили их с CDN.
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
И после подключить файл со скриптом script.js

Управляя значениями переменных:
  • MAX_SNOW = 200 — максимальное количество снежинок
  • MAX_SNOW_SIZE = 7 — максимальный размер снежинки в пикселях
  • MAX_SNOW_SPEED = 1 — ускорение снежинки
Можно увеличить количество снега, управлять размером и скоростью падения.
Весь код представлен ниже:
Скачать 2200Загрузок 462,39 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи