Секция с падающим снегом на JS

Решение реализовано на библиотеке sparticles.js

Пример:

Падающий снег

HTML:

CSS:

JS:

Подключаем библиотеку sparticles.min.js или sparticles.js и скрипт:

Описывать все настройки я не буду, с ними более или менее все понятно, а напишу лишь про альтернативные значения некоторых из них:

  • composition может иметь значения: source-over, source-in, source-out, source-atop, destination-over, destination-in, destination-out, destination-atop, lighter, copy, xor, multiply/, screen, overlay, darken, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity
  • shape может иметь значения: circle, square, triangle, diamond, line, image
  • styles может иметь значения: fill, stroke, both

Если используется настройка image и снежинки, как в примере - нужно скачать следующие файлы:

А в скрипте прописать к ним пути.

Библиотека sparticles на github
Автор фотографии langll

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Виталий:

    ужос…
    отбирает 20% процессора, требуется библиотека на 100500 строк кода, которая даже в минифицированном варианте весит 13,5к.

    моя реализация: всего 30 строк JS-кода, 37 строк CSS-кода и всего 5% процесса.

    Ответить