Падаючий сніг на jQuery або html шаблон Новорічної вітальної листівки. Падаючий сніг на jQuery або html шаблон Новорічної вітальної листівки Підключаємо бібліотеку jQuery

Всім привіт! Рівно три роки тому я вже писав,. Але як з'ясувалося, скрипт, який я тоді пропонував, і спосіб його установки виявилися не зовсім зрозумілими для багатьох читачів мого блогу. Мене буквально завалили питаннями, тому що в тому випадку потрібно було прописувати доповнення в код, завантажувати файли в кореневу папку ... Звичайно довелося допомогти всім хто звернувся, а це, як Ви самі розумієте, зайняло чимало часу.

Але, як то кажуть, час не стоїть на місці. Буквально вчора на просторах нашого всезнаючого Інтернету мені випадково попався відмінний скрипт і тепер я знаю ще один спосіб, як встановити падаючі сніжинки на сайт. Заради спортивного інтересу я випробував його в роботі. Результати Ви бачите самі. Скрипт не гальмує швидкість завантаження сторінок сайту, практично підходить до будь-якої CMS, не напружує читачів - просто створює гарний настрій!

Для тих, кому сподобалися ці падаючі сніжинки, розповім подробиці їх «виготовлення». А готуються вони з допомогою ось цього невеликого скрипта:

І все! Більше ніяких папок з файлами або окремих файлів. Досить встановити даний код відразу після відкриваючого тега і новорічний настрій вже з Вами.

Але все теми різні і в моєму випадку мені довелося встановити скрипт в іншому місці. Даний скрипт я вставив в шапку сайту в файл header.php відразу після тега і все відмінно працює.

Але відразу попереджаю, що коли ви працюєте з редактором теми, потрібно обов'язково зробити резервну копію про всяк випадок, щоб підстрахуватися. Раптом ви щось зробите не так і допустите помилку, тоді ви зможете все виправити без проблем за допомогою резервної копії.

З подробиць можу додати, що в скрипт «вшиті» 40 сніжинок з максимальним розміром до 35px. І я теж вважаю, що це оптимальні значення. На жаль, я так і не зміг з'ясувати ім'я автора знайденої публікації для того, щоб сказати йому велике спасибі за виконану роботу.

А сніжинки прикрасять не тільки сайт, але і стануть чудовим доповненням тим, хто буде робити вітальні «вірусні» листівки до Нового року, якщо такі фанати гарного настрою є серед тих, хто читає цю статтю. До речі, в ці вірусні листівки Ви можете вбудувати коди і заробити на цьому.

Сподіваюся, що Вас теж не залишить байдужими цей пухнастий снігопад, і Ви порадуєте їм читачів своїх блогів протягом усіх майбутніх святкових днів.

Якщо будуть питання, Ви можете задати їх у коментарях до даної статті. Бажаю Вам всього найкращого і вітаю з наступаючим 2015 роком! Ви можете залишати коментарі та із задоволенням на них відповім.

Всім привіт дорогі друзі! Хоч і скінчилася зима, але все одно хочу розповісти вам як створити падаючі сніжинки на сайті WordPress, щоб трохи пригадати зимові дні :-). Робити падаючі сніжинки ми будемо за допомогою скрипта і плагіна.

Т. е в цій статті розберемо два абсолютно працюють способу. Там ви вже вирішите для себе якийсь варіант вам краще. Отже давайте приступимо до практичної частини уроку.

Як зробити падаючі сніжинки WordPress за допомогою плагіна?

Побродивши по інтернету в пошуках кращого варіанта я зупинив свій вибір на плагін - WP Super Snow. У деяких статтях я зустрічав і інші варіанти, але у всіх у них автори давно не займаються оновленнями своїх творінь. А вордпресс постійно оновлюється і розвивається. Тому тут потрібно постійно підтримувати свій проект, щоб була сумісність з усіма версіями.

Отже, зайдемо в розділ Модулі - Додати Новий і встановимо плагін падаючих сніжинок для WordPress.

Натискаємо на кнопку Установка, все робимо як зазвичай. До речі, якщо ви до сих пір не знаєте, як, то моя стаття вам в цьому допоможе.

Відмінно! Плагін ми встановили та активували. Після цього в лівій частині вашої панелі адміністратора WordPress з'явиться розділ Super Snow.

Перейшовши всередину ви побачите, що плагін відключений і його потрібно включити.

Зараз ми з вами стисло нагадаємо основні налаштувань.

Перший розділ Deactivation Safeguards (Безпека при деактивації) - залишаємо перший пункт у випадаючому списку як є, нічого не міняємо. Тим більше він рекомендований. Тут нас просто попереджають, що якщо ви видалите плагін із загального меню, то нічого не втрачено. Якщо ви хочете стерти всі сліди перебування плагіна на сайті, то тоді повинні натиснути на перший варіант. Показано тут:

У цій секції ви можете задавати розміри падаючих сніжинок і їх кількість, додавати свій варіант сніжинок, вказувати в якому тезі вони повинні бути встановлені. За замовчуванням всі укладено в тезі body. Ви ж можете його перевизначити. Також можете вказати затримку в секундах падаючих сніжинок на сайті, ефекти.

Наступна остання опція - це відображення падаючих сніжинок на сторінках і постах. Пам'ятайте, що на мобільних пристроях снігу не буде, тому як він там просто виключений.

Наприклад, ви можете запускати падаючі сніжинки щойно на специфічних сторінках вказавши це за допомогою спеціальної функції (Вони наведені на сторінці)

Ось приклади функцій:

Wp_is_mobile () && is_page ( "christmas-promo") - якщо ця сторінка не мобільна, то показувати на сторінці Christmas-promo

Wp_is_mobile () &&! is_ssl () - Чи не показувати якщо це не мобільний пристрій і не захищений протокол https і SSl

Wp_is_mobile () && time ()\u003e \u003d strtotime ( "2015-12-01") && time ()<= strtotime ("2015-12-31" ) - Чи не показувати на мобільних пристроях і показувати тільки в період не пізніше 12 січня і не раніше 31 декабря.Т.е задаємо часовий інтервал.

Після всіх дій і проведених налаштувань ми натискаємо на «Зберегти зміни».

Ось що у вас приблизно вийде в браузері.

Вийшли великі, повільно падаючі сніжинки на тестовому сайті WordPress. Дуже навіть симпатично.

Як зробити падаючі сніжинки на сайт через скрипт?

В наведеному вище прикладі ми робили сніжинки за допомогою плагіна. Може бути це і добре, але всі ми знаємо, що плагіни обтяжують сайт і знижують швидкість. Для тих, хто звик все робити через функції і код, пропоную зробити падаючі сніжинки через скрипт. Їх багато в мережі. Я зупинюся на найпростішому варіанті - Snowstorm.

Завантажити цей скрипт можете прямо тут - snowstorm.zip

Що вам потрібно зробити в першу чергу? Першим кроком створіть папку директорію, куди ви зможете помістити ваш яваскрипт код. Я створив папку Lib в корені сайту і вже в неї завантажив.

Всередині неї ніяких більш папок створювати не потрібно, щоб не подовжувати шлях.

Потім йдемо в шаблон футера нашого сайту і до закриває тега < / body > підключаємо наш скрипт ось такий рядком:

Для наочності покажу куди я його вставив:

Обов'язково збережіть всі зміни і ось, що у вас повинно вийти на сайті:

Тепер з нашими сніжинками на сайті можна «погратися», тобто ставити їм швидкість, розміри, кількість самих сніжинок і інші параметри. Для цього нам потрібно проробити невеликі зміни в скрипті.

Вставимо наступний код нижче в область футера:

У шаблоні все це буде виглядати так:

Тепер подивимося, що вийшло в браузері:

Як ми бачимо наші снежинке на сайті стали ніжно блакитного кольору, прямо справжній снігопад на сайті вийшов 🙂

Інші налаштування скрипта сніжинок

Для того, щоб ще більше «поізвращаться» над скриптом я пробіжуся по інших функцій.

snowStorm. autoStart \u003d true; - вибір між тим чи сніг автоматично з'являтися під час запуску сторінки чи ні.

snowStorm. animationInterval \u003d 33; - вимір інтервалу мілісекунд на кадр. При значення \u003d 20 швидка і гладка, але буде навантажувати процесор. Якщо поставити \u003d 50, то більш консервативно, але повільніше.

snowStorm. flakeBottom \u003d null; - обмеження прилипання снігу до нижньої частини сторінці. Якщо не вказано, то сніг просто прилипне до нижньої частини сторінки сайту і зникне з прокруткою або скроллингом.

snowStorm. flakesMax \u003d 128; - установка значення максимальної кількості сніжинок, що випадають в будь-якій частині сторінки за одиницю часу.

snowStorm. flakesMaxActive \u003d 64; - встановлює межу падаючих сніжинок (тобто рухаються на екрані і вважаються активними).

snowStorm. followMouse \u003d true; - дозволяє снігу рухатися на сайті з «вітром» по відношенню до руху мишки по осі X (вправо / вліво).

snowStorm. freezeOnBlur \u003d true; - зупиняємо ефект сніжинок, коли користувач в даний момент виходить з вікна браузера, наприклад переходить на іншу вкладку, тоді сніг зупиняється. Це зберігає CPU і приємніше для користувача.

snowStorm. snowColor \u003d "#fff"; - білий колір снігу (не їжте і не використовуйте на сайті жовтий сніг :-))

snowStorm. snowCharacter \u003d ""; -. () \u003d Bullet. · Entity (·) не використовується, оскільки в деяких системах це вважається квадратом. Будь-яка зміна можна привести до обрізку нашої сніжинки і може також спричинити flakeWidth (довжина) / flakeHeight (висота) зміни, так що будьте обережні.

snowStorm. snowStick \u003d true; - параметр дозволяє сніжинкам «прилипати» до низу екрану, коли вимкнений, то сніг ніколи не осяде на дно екрана.

snowStorm. targetElement \u003d null; - тут трохи складніше, я це зрозумів як html елемент прописується за замовчуванням в тіло документа ( body). Може бути елементом ID рядки, наприклад 'myDiV' або DOM посиланням. Якось так.

snowStorm. useMeltEffect \u003d true; - за підтримки даного параметра впав сніг буде танути, при включеному значенні.

snowStorm. useTwinkleEffect \u003d true; - дозволяє снігу мерехтіти поза увагою в момент падіння.

snowStorm. usePositionFixed \u003d false; - при булевскому значення true - вікно прокрутки не впливатиме на падаючий сніг, тобто він буде йти і йти. Це помітно збільшує навантаження на процесор. За замовчуванням варто false.

snowStorm. vMaxX \u003d 8; snowStorm. vMaxY \u003d 5; - значення швидкості сніжинок по x і y для шторму. Випадкова величина в цьому діапазоні вибирається для кожного сніжинки.

На цьому все дорогі друзі, цілком можливо, що я допустив десь помилку в поясненні налаштувань скрипт, ви тоді мене поправте. У мене, в цілому, все прекрасно працює і радує око. Дякую за увагу, чекаю ваших коментарів і дискусій. У мене до вас питання - а який ефект ви використовуєте з настанням зими для сайту? 🙂

Добрий час доби і з наступаючим. Напередодні Нового року я хочу з вами поділити дуже легким, красивим і невибагливим плагіном падаючого снігу. Цей скрипт дійсно дуже легкий і спокійно поміщається в html файлі, що не утруднюючи роботи з самим html кодом сайту. Правда його можна і винести в окремий файл. Але для зручності я зробив все в одному файлі.

Тут мало що можна сказати, краще подивитися демонстрацію цього падаючого снігу. До того ж там дуже гарний фон і напис "З Новим роком", написана гарним шрифтом "Lobster" від Google. Ви з легкістю цей файл можете перетворити в інтернет листівку з привітанням.

Підключення скрипта падаючих сніжинок на готовий сайт

1. Підключаємо бібліотеку jQuery

Підключається вона так: між тегами і вставляєте наступний код:

2. Підключаємо стилі

Вставте css-код у свій css файл (зазвичай це style.css):

#canvas (border: 1px solid black; position: absolute; z-index: 10000;) #flake (color: #fff; position: absolute; font-size: 25px; top: -50px;)

3. Створюємо файл snow.js

Створимо файл snow.js і вставляємо туди наступний javascript-код:

Підключаємо js-файл в :

4. Вставляємо html код

Ну і залишилося найголовніше - вставити html код падаючого снігу в будь-місця в :

Якщо ви все зробили правильно, то у Вас на сайті почне падати сніг.

Підключення фонової картинки, великого заголовка і падаючих сніжинок

Цей варіант відрізняється тим, що у нього є фонове зображення і великий заголовок «З Новим роком». Підключити цей варіант скрипта падаючого снігу на сайт досить просто. потрібно:

1. Завантажуємо архів і його разархівіровіруем

2. Підключаємо бібліотеку jQuery

Обов'язково підключити бібліотеку jQuery (не обов'язково, якщо у Вас вже підключена ця бібліотека). Підключається вона так: між тегами і вставляєте наступний код:

3. Підключаємо шрифт "Lobster"

Аналогічно підключенню бібіліотека jQuery, підключаємо шрифт для нашої написи "З Новим роком":

Природно, якщо Вам не потрібна ця напис і шрифт, ви можете його не підключати, але тоді і в css приберіть у атрибута H1 "font-family:" Lobster ", cursive;", або замініть його на свій шрифт

4. Підключаємо стилі

Варіант А. Вставте css-код у свій css файл. Ось код:

Img.bg (/ * Set rules to fill background * / min-height: 100%; min-width: 1024px; / * Set up proportionate scaling * / width: 100%; height: auto; / * Set up positioning * / position: fixed; top: 0; left: 0;) h1 (font-family: "Lobster", cursive; color: #FFF; font-size: 90px; text-align: center; line-height: 95px; font- weight: normal; margin-top: 300px; text-shadow: 5px 5px 5px # 000;) @media screen and (max-width: 1024px) (/ * Specific to this particular image * / img.bg (left: 50% ; margin-left: -512px; / * 50% * /)) html, body (font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margin: 0; color: # 333;) .bar (background-color: # 111; color: # f0f0f0; box-shadow: 0px 0px 2px # 333; line-height: 25px; padding: 0px 20px; opacity: 0.7;). bar: hover (opacity: 1;) .bar a (color: #DDD;) .bar a: hover (color: #FFFFFF;) a (color: #FFFFFF; text-decoration: none;) a: hover (color : #CCC;) #canvas (border: 1px solid black; position: absolut e; z-index: 10000; ) #Flake (color: #fff; position: absolute; font-size: 25px; top: -50px;) #page (position: relative;)

Варіант B.Також можна створити окремий файл, наприклад snow.css і вставити цей же код туди, правда його треба буде підключити в head наступним чином:

5. Підключаємо скрипт падаючого снігу

Варіант А.Для цього нам потрібно вставити в самий низ сайту (до закриття) Наступний javascript-код:

Варіант B. Також як і з css-кодом, javascript можна винести в окремий файл і також його назвати snow.js і підключити його в head:

6. Заливаємо зображення фону

Залити картинку bg.jpg з архіву в корінь вашого сайту

7. Вставляємо html код

Ну і залишилося найголовніше - вставити html код падаючого снігу:

З новим роком!

Скрипт падаючого снігу успішно підключений. Обов'язково подивіться його в роботі. Всього найкращого!

Прикрашати свої сайти і блоги в період Новорічних та Різдвяних свят справа хороша. Приємно якось навіть такі сайти відвідувати :).

Мій блог не виняток, він теж перетворився на період цих зимових свят. Ви напевно помітили новий логотип, яким я ніяк не можу похвалитися написавши про нього пост, він в даний момент прикрашений ялинкою і припорошений снігом.

Раніше я ні разу не встановлював скрипти падаючих сніжинок на сайт, тому як бачив це диво на інших сайтах і скажу чесно - мені не дуже подобалося, а іноді навіть дратувало.

Зовсім недавно в google з'явилася нова фішка. Я про неї повідомляв в - це падаючий сніг і заморожують екран, який потім можна прати пальцем. Спробуйте, введіть у пошуковик запит " let it snow ”.

Мені дуже сподобався такий підхід з двох причин:

1 . виглядає дуже симпатично;

2 . Сніг починає падати лише за запитом користувача.

Ось така прикраса на мене. Але реалізувати заморозку екрана я не зможу - не програміст, хочу замовити програмісту, але не впевнений що поспіє до цього Нового року. А ось з падаючим снігом в стилі гугла і «на замовлення» відвідувача - це можна :). Правда знову ж таки не своїми силами, а за допомогою одного хорошого «іносранца» :), але не суть.

Перш ніж я познайомлю вас зі снігом в моєму блозі, давайте спочатку коротенько згадаємо кілька плагінів для wordpress, які генерують не поганий сніг для сайту.

Новорічні плагіни падаючого снігу для WordPress

Дуже навіть хороший плагін. Не мало різного роду налаштувань: швидкість анімації, колір падаючого снігу, розмір пластівців, кількість одночасно падаючих сніжинок і ін. Є навіть щось на кшталт заморожування, але я не зміг його запустити :(.

На перший погляд сніг на сайті виглядає ніби не погано, спробуйте, можливо вам сподобається.

Але мені цей плагін не підійшов. По-перше я не дуже люблю плагіни і користуюся ними тільки при гострій необхідності, а по-друге сніг починає «валити» відразу після завантаження сторінки (другий пункт пам'ятаєте?) І іноді відволікає від основного контенту сайту (миготять мухи перед очима, блін :)), та й сніжинки все одного розміру.

Кажуть хороший плагін. У мене чомусь не запустився, хоча встановився нормально, а снігу немає :). Спробуйте, може у вас вийде краще.

Цей плагін робить точно такий же сніг, як зараз у мене. Налаштувань ніяких особливо немає, просто - встановили і пішов сніг. Хоча якщо захотіти, то дещо налаштувати все ж можна (кольору, швидкість і т.д.) в редакторі плагінів, тобто редагуючи сам файл плагіна.

Все б добре, але мінуси ті ж, що і раніше: це все-таки плагін, хоч і не «важкий», і сніг іде постійно, навіть якщо користувачеві він в общем-то не потрібен.

Цей плагін можна назвати універсальним святковим плагіном. По мимо власне снігу цей скрипт може і кульки надувні пускати і листочки всякі :).

Дуже цікавий плагін ... навіть захотілося встановити. Але ..., є у мене вже свій сніг :).

Сніг на сайт за запитом користувача

Ось власне те рішення, яке на мій погляд найкраще з усіх перерахованих вище. Звичайно тут не все так круто, як в тому ж «Snow, balloons and more», але простіше не означає гірше.

Найголовніший плюс цього скрипта - це «сніг на замовлення». Сніг не піде сам по собі, його треба буде викликати натисканням кнопки. Таким чином відвідувач не буде напружуватися з приводу нескінченно заважають читати білих пластівців на екрані. Якщо він захоче снігу, він його побачить.

Для початку скачайте ці файли і залийте на ваш сервер в потрібну папку:,. Кнопка, до речі, ось так виглядає:

Потім між тегами пропишіть шлях до скриптів:

< script type= "text/javascript" src= "Шлях / jquery.min.js? Ver \u003d 1.7"> < script src= "Шлях / jquery.letsinsnow.js">

Зверніть увагу, якщо у вас вже є підключена бібліотека jquery, то повторно підключати її зовсім не потрібно. Тоді просто пропишіть шлях до jquery.letsinsnow.js.

У файлі jquery.letsinsnow.js в рядку 15 ( 'color': '# 79B3EC',) можна змінити колір сніжинок. Решта думаю можна залишити за замовчуванням;).

Залишилося лише кнопку на сайт додати, при натисканні на яку повалить сніг. Для цього необхідно виконати пару легких кроків:

1 . Розмістити код кнопки в потрібному місці сайту:

< input name= "snowbutton" TYPE = "button" onclick= "$("body").snowFall();" title= "Сніжинки!" class= "snowbutton" />

У мене кнопка розміщена в шапці блогу. Тому код я додавав в файл header.php свого wordpress шаблону.

2 . Додати в файл стилів (зазвичай це style.css) наступний стиль:

.snowbutton (background: url ( "snowflake.png") 100% no-repeat; width: 64px; height: 64px; overflow: visible; margin-top: 80px; margin-left: 740px; cursor: pointer; border: 0 ;)

Тут вам знадобиться відкоригувати пару параметрів:

- шлях до зображення кнопки: background: url ( «snowflake.png») 100% no-repeat;.

- місце розташування кнопки на сайті: margin-top: 80px;(Відступ зверху екрану) і margin-left: 740px; (Відступ зліва).

Само собою ви можете прописати зовсім інші стилі і використовувати іншу кнопку. Я лише навів приклад, який зараз працює у мене в блозі.

До речі, спробуйте. Кнопка знаходиться в шапці блогу, поруч з формою пошуку:

Удачі Вам друзі! З наступаючим Новим роком та Різдвом!

Солодке на сьогодні: Приємна мелодія, приємна пісня, приємний Різдвяний кліп. Насолоджуйтесь 🙂

До зими залишилося зовсім небагато часу, і велика кількість веб-майстрів починають створювати належну атмосферу на своїх сайтах. З такого приводу представляємо нашу добірку ефектів снігу для вашого сайту.

jSnow - універсальний скрипт падаючого снігу на jQuery

Почнемо ми нашу добірку з дуже красивого ефекту снігу, який додається на сайт за допомогою плагіна під назвою «jSnow».

демонстрація:

Погодьтеся - красиво!

Для того, щоб встановити цей ефект до себе на сайт, зробіть наступне.

1. скачайте архів jsnow.zip в кінці статті. Разархівіруйте і вміст завантажте на ваш сайт по FTP або іншим зручним для вас способом.

На жаль, з новими версіями jQuery скрипт не працює, так що задовольняємося тим, що є.

3. перед закриває тегом підключаєте скрипти:

У цьому коді налаштовується розмір сніжинок, висота, яку вони займають області, колір і інші прокоментовані параметри.

Скрипт, як ви розумієте, універсальний, і замість круглого снігу ви можете додати зірки, наприклад, так:

FlakeCode: [ "*"] // Вид сніжинки

Або ж зв'язку круглого снігу і зірок:

FlakeCode: [ ".", "*"] // Вид сніжинки

А також будь-який інший символ (і навіть знак долара - $).

Скрипт відмінно підходить для оформлення верху сайту, не перекриваючи при цьому основний контент.

Snowstorm - розумний скрипт падаючого снігу на JavaScript

Чому розумний, запитаєте ви? Тому що в цьому скрипті (на відміну від інших розглянутих в даній статті) присутній додатковий ефект відштовхування сніжинок. Тобто при переміщенні курсору миші на вашому сайті сніжинки спрямовуються в протилежну сторону від нього. Чим далі курсор від середини екрану - тим швидше швидкість руху сніжинок.

демонстрація:


Щоб встановити цей ефект на свій сайт, не потрібно додаткових бібліотек. Все, що вам потрібно зробити, це:

1. завантажити архів snowstorm.zip в кінці статті. Розархівувати і вміст завантажити на ваш сайт зручним для вас способом.

За необхідності вносите зміни в анімацію скрипта.

Крім того, що сніжинки відштовхуються від курсора, частина з них прилипає до низу екрану, створюючи невелику враження формування сніжинками замету.

Snowfall - ефект падаючого снігу із заметами на jQuery

Цей скрипт мені подобається найбільше, адже він реалізує дрібну снігову крупу, а також збирає на зазначених елементах невеликі замети.

демонстрація:


Установка цього ефекту трохи довше за інших.

1. Якщо на вашому сайті відсутня бібліотека jQuery, підключіть її в секцію HEAD:

3. відкриває тегу надайте клас « darkBg»:

4. перед закриває тегом підключіть скрипти:

5. І завершальним етапом надайте клас тих елементів, над якими повинні утворюватися замети:

Class \u003d "collectonme"

Якщо ви не хочете формування заметів на сайті - видаліть з скрипта рядок:

Collection: ".collectonme",

Це обов'язкова дія, інакше сніг на вашому сайті не буде падати.

Відмінний скрипт, саме його ми раніше використовували на своєму сайті.

Плавний багаторівневий ефект падаючого снігу на CSS3

Тут, як ви розумієте, ми не будемо вдаватися до використання всіляких скриптів, а обійдемося лише чистим CSS.

демонстрація:


Чарівно, чи не так?

Для того, що б встановити до себе цей ефект, зробіть три нескладних кроку.

1. скачайте архів snow_img.zip в кінці статті. Разархівіруйте і вміст завантажте на ваш сайт по FTP або через файловий менеджер хостингу.

2. У ваш файл стилів вставте (бажано в самий низ):

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 40 0px, 300px 300px; ))

Після чого збережіть всі зміни.

Ось така гарна добірка ефектів снігу, яка, без сумніву, порадує відвідувачів вашого сайту.