25 610 Скрипты / Other

Снегопад на базе particles.js

Снегопад реализованный с помощью библиотеки particles.js. Добавлено реагирование снежинок на движение и нажатие курсора. В качестве снежинки используется простая прозрачная png картинка, которую можно заменить не только на снежинки.

HTML

На страницу добавляем контейнер, в котором будет работать снег
<div id="particles-js"></div>

CSS

Стиль для этого контейнера, может отличаться от предлагаемого
#particles-js{
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  overflow: hidden;
}
Важно помнить, что если вам не нужен снегопад по верх вашего сайта, а лишь на фоне, то в CSS нужно учесть порядок слоев (z-index)
В демо версии для шапки, контента и футера прописан z-index: 1, чтобы они располагались над слоем со снегом.

JS

Подключить библиотеку particles.js
<script src="js/particles.min.js"></script>
И подключить скрипт:
Строка со снежинкой, указывается путь до картинки:
./img/snowflake3.png
В архиве есть на выбор 4 вида снежинок.
Скачать 2731Загрузок 540,16 Kb
Демо

Комментарии

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

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