Добрий час доби та з наступаючим. Напередодні Нового року я хочу поділити з вами дуже легким, красивим і невибагливим плагіном падаючого снігу. Цей скрипт дійсно дуже легкий і спокійно поміщається в 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; weight: normal; margin-top: 300px;text-shadow: 5px 5px 5px #000; ) @media screen and (max-width: 1024px) ( /* Specific to this image margin-left: -512px; /* 50% */ ) ) html, body ( font-family: Helvetica, Arial, sans-serif; font-size: 12px; 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 код падаючого снігу:
З новим роком!
Скрипт снігу, що падає, успішно підключений. Обов'язково подивіться його у роботі. Всього найкращого!
Всім привіт! Рівно три роки тому я вже писав. Але, як з'ясувалося, скрипт, який я тоді пропонував, і спосіб його встановлення виявилися не зовсім зрозумілими для багатьох читачів мого блогу. Мене буквально завалили питаннями, тому що в тому випадку потрібно було прописувати доповнення в код, завантажувати файли в кореневу папку... Звичайно, довелося допомогти всім, хто це звернувся, а це, як Ви самі розумієте, зайняло чимало часу.
Але, як кажуть, час не стоїть на місці. Буквально вчора на просторах нашого всезнаючого Інтернету мені випадково попався відмінний скрипт і тепер я знаю ще один спосіб, як встановити падіння сніжинки на сайт. Заради спортивного інтересу я випробував його у справі. Результати Ви самі бачите. Скрипт не гальмує швидкість завантаження сторінок сайту, практично підходить до будь-якої 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 () >= strtotime ("2015-12-01" ) && time ()<= strtotime ("2015-12-31" ) - Не показувати на мобільних пристроях і показувати тільки в період не пізніше 12 січня і не раніше 31 грудня. Тобто задаємо часовий інтервал.
Після всіх дій та налаштувань ми натискаємо на «Зберегти зміни».
Ось що у вас приблизно вийде у браузері.
Вийшли великі, повільно падаючі сніжинки на тестовому сайті WordPress. Дуже навіть симпатично.
Як зробити падіння сніжинки на сайт через скрипт?
У прикладі вище ми робили сніжинки за допомогою плагіну. Може бути це і добре, але ми знаємо, що плагіни обтяжують сайт і знижують швидкість. Для тих, хто звик все робити через функції та код, пропоную зробити падіння сніжинки через скрипт. Їх багато у мережі. Я зупинюся на найпростішому варіанті – Snowstorm.
Завантажити цей скрипт можете прямо тут - snowstorm.zip
Що вам потрібно зробити насамперед? Першим кроком створіть папку директорії, куди ви зможете помістити ваш яваскрипт код . Я створив папку Lib у корені сайту і вже до неї завантажив.
Усередині неї більше папок створювати не потрібно, щоб не подовжувати шлях.
Потім йдемо в шаблон футера нашого сайту і до тега, що закриває < / body > підключаємо наш скрипт ось таким рядком:
|
Для наочності покажу, куди я його вставив:
Обов'язково збережіть усі зміни і ось, що у вас має вийти на сайті:
Тепер із нашими сніжинками на сайті можна «погратися», тобто ставити їм швидкість, розміри, кількість самих сніжинок та інші параметри. Для цього нам потрібно зробити невеликі зміни у скрипті.
Вставимо наступний код нижче в область футера:
У шаблоні все це виглядатиме так:
Тепер подивимося, що вийшло у браузері:
Як ми бачимо наші сніжинки на сайті стали ніжно блакитнуватого кольору, справжній снігопад на сайті вийшов 🙂
Інші налаштування скрипту сніжинок
Для того, щоб ще більше «поповертатися» над скриптом я пробігу по інших опціях.
snowStorm. autoStart = true;— Вибір між тим буде автоматично з'являтися сніг при завантаженні сторінки чи ні.
snowStorm. animationInterval = 33;- Вимірювання інтервалу мілісекунд на кадр. При значення = 20 швидка і гладка, але навантажуватиме процесор. Якщо поставити = 50, то консервативно, але повільніше.
snowStorm. flakeBottom = null;- обмеження прилипання снігу до нижньої частини сторінки. Якщо не вказано, сніг просто прилипне до нижньої частини сторінки сайту і зникне з прокруткою або скролінгом.
snowStorm. flakesMax = 128;- Встановлення значення максимальної кількостісніжинок, що випадають у будь-якій частині сторінки за одиницю часу.
snowStorm. flakesMaxActive = 64;— встановлює межу падіння сніжинок (тобто рухаються на екрані та вважаються активними).
snowStorm. followMouse = true;— дозволяє снігу рухатися на сайті з вітром по відношенню до руху мишки по осі X (вправо/ліворуч).
snowStorm. freezeOnBlur = true;- зупиняємо ефект сніжинок, коли користувач в Наразівиходить з вікна браузера, наприклад, переходить на іншу вкладку, тоді сніг зупиняється. Це зберігає CPU і приємніше для користувача.
snowStorm. snowColor = "#fff";— білий колір снігу (не їжте та не використовуйте на сайті жовтий сніг:-))
snowStorm. snowCharacter="";- . ( ) = Bullet. · entity (·) не використовується, оскільки в деяких системах це вважається квадратом. Будь-яка зміна може призвести до обрізки нашої сніжинки і може також спричинити flakeWidth (довжина) / flakeHeight (висота) зміни, так що будьте обережні.
snowStorm. snowStick = true;— параметр дозволяє сніжинкам «прилипати» до низу екрана, коли вимкнено, то сніг ніколи не осяде на дно екрана.
snowStorm. targetElement = null;- Тут трохи складніше, я це зрозумів як html елемент прописується за замовчуванням у тіло документа ( body). Може бути елементом ID рядка, наприклад, 'myDiV' або DOM посиланням. Якось так.
snowStorm. useMeltEffect = true;— за підтримки даного параметра сніг, що впав, танутиме, при включеному значенні.
snowStorm. useTwinkleEffect = true;— дозволяє снігу мерехтіти поза увагою в момент падіння.
snowStorm. usePositionFixed = false;— при булевському значення true — вікно прокручування не впливатиме на сніг, тобто він йтиме і йтиме. Це значно збільшує навантаження на процесор. За промовчанням варто false.
snowStorm. vMaxX = 8; snowStorm. vMaxY = 5;- Значення швидкості сніжинок по x і y для шторму. Випадкова величина у цьому діапазоні вибирається для кожного сніжинки.
На цьому всі дорогі друзі, цілком можливо, що я припустився десь помилки в поясненні налаштувань скрипт, ви тоді мене виправте. У мене, в цілому, все чудово працює і тішить око. Дякуємо за увагу, чекаю на ваші коментарі та дискусії. У мене до вас питання - а який ефект ви використовуєте з настанням зими для сайту? 🙂
подбає про прикрасу сайту. Заходиш на сайт, а там, падає сніг чи сніжинки, відчувається дух свята і створюється гарний святковий настрій. Хоча сніг віртуальний, але все одно, тішить. Згодні? Ну звичайно. Тоді, я вам сьогодні підкажу Як додати, увімкнути, встановити сніг або сніжинки на сайті.Для цього існують спеціальні плагіни, за допомогою яких можна на святкові днівключити сніг, що падає, або сніжинки на сайті, а для тих, хто боїться модулів, є скрипт падаючого снігу на сайт. Скрипт я представлю вам у самому кінці посту. А поки що найпростіші плагіни, які оновлюються та сумісні з останньою версією WordPress.
Плагін Snow Flurry – йде сніг на сайті WordPress
Простий плагін, що повністю настроюється. З можливістю встановлення: максимальний розмірсніжинки; як часто створюються нові пластівці; додати мінімальну та максимальну швидкість падіння снігу, колір сніжинки, а також можливість відключити плагін після заданої кількості секунд. Після встановлення та активації plugin, в адмінпанелі з'явиться розділ із відповідною назвою:
Супер плагін WFS Let It Snow – додає снігопад на вашому сайті
Плагін WFS Let It Snow
Відмінний плагін на JQuery, за допомогою його можна влаштувати просто справжній снігопад на сайті, тобто білу імлу. У налаштуваннях можна вибрати тип снігопаду з чотирьох варіантів: слабкий, середній, важкий та біла імла. А також, зробити падаючі сніжинки тільки на головній сторінціабо на всіх; увімкнути/вимкнути сніг; мінімальний та максимальний розмір сніжинок; мінімальна та максимальна швидкістьпластівців; увімкніть тіні (для веб-сайтів з білим тлом):
Налаштування WFS Let It Snow Plugin
Тут, також після встановлення та активації плагіна в розділі налаштування з'явиться підрозділ Let It Snow, натискаєте та налаштовуєте. Йдемо далі.
Tribulant Snow Storm - хуртовина на вашому сайті
Цей плагін мені сподобався більше, навіть не знаю чому, може через напрям снігопаду, хуртовина зі снігу реагує на рух покажчика мишки (якщо включити таку опцію). Прикольно відвідувачам сподобається. Ще з налаштувань: колір снігу; кількість пластівців; інтервал анімації; підтримка мобільних; сніг таїть внизу екрану і ефект мерехтіння:
Ось мабуть і все з модулями для прикраси сайту снігом, що падає, на які варто звернути вашу увагу. Я теж ближче до Нового року влаштую хуртовину на блозі. Жаль одне, якщо у вас світле тло сайту (у мене теж) доведеться білий сніг міняти на інший, наприклад: синій або блакитний. От якось так. Ледве не забув, всі представлені плагіни встановлюються стандартним способом, через адмінпанель - додати плагін і в полі пошуку ввести назву його.
Тепер, для тих, хто не хоче зв'язуватися з плагінами, простий спосіб - як встановити сніг, що падає, на сайт без плагіна .
Скрипт падаючого снігу на сайт
Скрипт падіння сніжинок підійде для будь-якого сайту або блогу на будь-якій платформі. Тільки доведеться повозитися (скрипт треба завантажити на свій хостинг), можна використовувати свій хостинг, де розташований ваш сайт, а можна скористатися стороннім, наприклад: безкоштовний і Диск Google. І так ось код скрипту:
/* Snow Fall 1 - no images - Java Script Visit http://rainbow.arch.scriptmania.com/scripts/ for this script and many more */ // Set the number of snowflakes (more than 30 - 400 not recommended) var snowmax=100 // Набір кольорів для snow. Add as many colors as you like var snowcolor=new Array("#b9dff5","#b9dff5","#b9dff5","#b9dff5","#b9dff5") // Set the fonts, that create the snowflakes. Add as many fonts as you like var snowtype=new Array("Times") // Set the letter that creates your snowflake (recommended: *) var snowletter="*" // Set the speed of sinking (recommended values range from 0.3 до 2) var sinkspeed=0.6 // Натисніть на maximum-size of your snowflakes var snowmaxsize=35 // Set the minimal-size of your snowflakes var snowminsize=8 // Set the snowing-zone // Set 1 for all-over -snowing, set 2 for left-side-snowing // Set 3 for center-snowing, set 4 for right-side-snowing var snowingzone=1 ////////////////// //////////////////////////////////////////////// /////// // CONFIGURATION ENDS HERE //////////////////////////////////// ///////////////////////////////////// // Do not edit below this line var snow=new Array () var marginbottom var marginright var timer var i_snow=0 var x_mv=new Array(); var crds=new Array(); var lftrght=new Array(); var browserinfos=navigator.userAgent var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/) var ns6=document.getElementById&&!document.all var opera=browserinfos.match(| ns6||opera function randommaker(range) ( rand=Math.floor(range*Math.random()) return rand ) function initsnow() ( if (ie5 || opera) ( marginbottom = document.body.scrollHeight marginright = document .body.clientWidth-15 ) else if (ns6) ( marginbottom = document.body.scrollHeight marginright = window.innerWidth-15 ) var snowsizerange=snowmaxsize-snowminsize for (i=0;i<=snowmax;i++) { crds[i] = 0; lftrght[i] = Math.random()*15; x_mv[i] = 0.03 + Math.random()/10; snow[i]=document.getElementById("s"+i) snow[i].style.fontFamily=snowtype snow[i].size=randommaker(snowsizerange)+snowminsize snow[i].style.fontSize=snow[i].size+"px"; snow[i].style.color=snowcolor snow[i].style.zIndex=1000 snow[i].sink=sinkspeed*snow[i].size/5 if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)} if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)} if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4} if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2} snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size) snow[i].style.left=snow[i].posx+"px"; snow[i].style.top=snow[i].posy+"px"; } movesnow() } function movesnow() { for (i=0;i<=snowmax;i++) { crds[i] += x_mv[i]; snow[i].posy+=snow[i].sink snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+"px"; snow[i].style.top=snow[i].posy+"px"; if (snow[i].posy>= marginbottom-2 * snow [i]. size | | parseInt(snow[i].style.left)>(marginright-3*lftrght[i]))( if (snowingone==1) (snow[i].posx=randommaker(marginright-snow[i].size)) ) if (snowingzone==2) (snow[i].posx=randommaker(marginright/2-snow[i].size)) if (snowingi==3) (snow[i].posx=randommaker(marginright/2) -snow[i].size)+marginright/4) if (snowingzone==4) (snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2) snow[i] .posy=0 ) ) var timer=setTimeout("movesnow()",50) ) for (i=0;i<=snowmax;i++) { document.write(""+snowletter+"")) if (browserok) (window.onload=initsnow)
Перш ніж завантажувати цей скрипт на хостинг, його треба (якщо необхідно) відредагувати, тобто колір снігу, кількість, швидкість і так далі. Потім завантажуєте код на хостинг, а посилання на нього вставляєте сюди:
Наступний крок, цю конструкцію вставляємо після тега
у вашому шаблоні і все готове. У вас піде сніжок на блозі, у вигляді сніжинок. А я прощаюся з вами, не довго. Хай щастить.(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "RA -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); s .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); , this.document, "yandexContextAsyncCallbacks");До зими залишилося зовсім небагато часу, і велика кількість вебмайстрів починає створювати належну атмосферу на своїх сайтах. З цього приводу представляємо нашу вибірку ефектів снігу для вашого сайту.
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="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; ) background : 500px 1000px, 400px 400px, 300px 300px; ) 0 0 0 0 300px; ) ) @-webkit-keyframes snow ( 0% ( background-position: 0px 0px, 0px 0px, 0px 0px; ) 100% ( background-position: 500px 1000px, 400px 400p) keyframes snow ( 0% ( background-position: 0px 0px, 0px 0px, 0px 0px; ) 100% ( background-position: 500px 1000px, 400px 40 0px, 300px 300px; )
Після чого збережіть усі зміни.
Ось така хороша добірка ефектів снігу, яка, безперечно, порадує відвідувачів вашого сайту.
