Пример:
Падающий снег
HTML:
|
1 2 3 |
<div class="falling"> <h2>Падающий снег</h2> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.falling { width: 100%; height: 500px; position: relative; background-image: url("photo-bg.jpg"); background-size: cover; background-position: center center; margin: 10px 0 20px 0; } .falling canvas { position: absolute; top: 0; left: 0; bottom: 0; right: 0; mix-blend-mode: color-dodge; } .falling h2 { padding: 40px; background: rgba(255,255,255,0.3); position: relative; z-index: 2; } |
JS:
Подключаем библиотеку sparticles.min.js или sparticles.js и скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
let colors = { color1: "rgba(255,255,255,1)", color2: "rgba(222,184,142,1)", color3: "rgba(232,248,255,1)", color4: "rgba(135,143,145,1)" }; let options = { alphaSpeed: 10, alphaVariance: 1, color: [colors.color1, colors.color2, colors.color3, colors.color4], composition: "source-over", count: 350, direction: 161, float: 0.75, glow: 0, imageUrl: [ "snow-1.svg", "snow-2.svg", "snow-3.svg", "snow-4.svg", "snow-5.svg", "snow-6.svg" ], maxAlpha: 2, maxSize: 22, minAlpha: -0.2, minSize: 4, parallax: 1.75, rotation: 0.5, shape: "image", speed: 3, style: "fill", twinkle: false, xVariance: 5, yVariance: 0, }; window.onload = function() { initSparticles(); } window.initSparticles = function() { var $main = document.querySelector('.falling'); window.mySparticles = new sparticles.Sparticles($main,options); }; |
Описывать все настройки я не буду, с ними более или менее все понятно, а напишу лишь про альтернативные значения некоторых из них:
- 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 и снежинки, как в примере - нужно скачать следующие файлы:
А в скрипте прописать к ним пути.
ужос...
отбирает 20% процессора, требуется библиотека на 100500 строк кода, которая даже в минифицированном варианте весит 13,5к.
моя реализация: всего 30 строк JS-кода, 37 строк CSS-кода и всего 5% процесса.
Виталий, можете выложить свой вариант куда-либо? очень нужно
Если готовы поделиться, скиньте, пожалуйста, ссылку на почту stekовчарка9272точка ру. Спасибо!