Скрипти сніжинок, що летить. Падіння снігу на jQuery або html шаблон Різдвяна листівка. Snowfall – ефект падаючого снігу з кучугурами на jQuery

Заборонивши використання JavaScript, Ви не зможете бачити цікаві прикладийого застосування!

JavaScript-ефект падаючого снігу

За допомогою мови програмування JavaScriptможна створити дуже цікавий ефект снігу, що падає на сайті.

Щоб зробити сніг на своєму сайті, до цієї сторінки я підключив довгий скрипт падаючого снігу, реалізований за допомогою JavaScript-коду.

Якщо потрібно додати ефект падаючого снігу на сайт HTML, то цілком достатньо лише налаштувати цей скрипт.

Скрипт снігу на сайті

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

Нижня межа видимості сніжинок- прописується в операторі if функції snow() , в 42-му рядку коду, у виразі: if (y_pos[i] > height - 89)( Нижня межа видимості сніжинок тим далі, чим менше цифра, віднімається з висоти. Якщо ж, замість зазначеного числа "89" , поставити, скажімо - "49" , то сніжинки будуть, "покружлявши" на малюнку прикладу, зникативже зайого розділювальною смугою.

Кількість сніжинок- встановлюється в 14-му рядку js-коду скрипта, у виразі: var col = Math.round(height/25);Кількість сніжинок тим більше, чим менше число, прописане у цьому виразі.

Швидкість сніжинок- Налаштовується в 50-му рядку коду, у виразі: setTimeout("snow()", 40); Швидкість сніжинок тим більше, що менше затримки.

** Наприклад , вказавши цим числам досить мале значення, скажімо - "5" , можна зробити "справжній снігопад" на сторінці свого сайту. "Буран"!

І окрім цього!

Не забувати(!) у першому рядку коду: var imgsrc="image/snow/snow.gif";вказувати шлях до потрібної картинки сніжинки.

До речі! Можна спокійно вказувати БУДЬ-ЯКУ КАРТИНКУіз цієї папки. Заради проби я брав і прописував картинки: snow.gif ÷ snow6.gif ( *цікаво; вони всі різні), абсолютно БЕЗ будь-яких змін у коді снігу.

Щоб сніжинки рівномірно розподілялися по всій висоті сторінки, ВАЖЛИВО(!) , девставляти JavaScript-код. Найкраще, щоб у сторінки не "смикався" нижній скролл, вставити код скрипту снігу кінець сторінки. ПЕРЕВІРЕНО!
**І ще! У тег код скрипта НЕ ВСТАВЛЮВАТИ! НЕ ПРАЦЮЄ!

Прикрасити свій сайт перед Різдвом та Новим роком дуже просто. Встановіть скрипт і на сайті з'являться гарні сніжинки.

Як встановити сніжинки на свій сайт

Якщо ви не захочете морочитися: завантажувати файл і завантажувати його на свій хостинг, можете просто додати один рядок до шаблону вашого сайту.

Перед закриваючим тегомвставте код:

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

Завантажити скрипт

Після натискання на одну з кнопок нижче з'явиться посилання для завантаження файлу.

Вебмайстри прикрашають сайти

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

Головне не перестаратися

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

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

Як прикрасити сайт перед Новим роком

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

Стаття на тему: Як підключити Яндекс.Спелер до WordPress

Я витратив багато часу, щоб знайти в інтернеті готові скрипти падіння сніжинок. Мені таки вдалося знайти скрипт з дуже симпатичними. Про нього я хочу вам розповісти.

Перша версія скриптузі сніжинками. Цю версію скрипта не скачуйте – вона сира.

Скрипт «Сніжинки, що падають»

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

Крім форми сніжинок, можна задавати колір, розмір, кількість і швидкість падіння.

Налаштування скрипту: колір, форма, розмір та кількість сніжинок

Скрипт буржуйський та свіжі коментарі англійською мовою. Але програмерам англійська мова- Рідний. Сподіваюся із цим складнощів не виникне.

Відомі проблеми зі скриптом

Оригінальний скрипт не позбавлений недоліків. Але всі вони вже успішно усунуті.

1. На широкоформатному моніторі сніжинки не заповнювали всю доступну область. У ява скрипті я не особливо розбираюся. Тому виправити недолік у цьому скрипті я попросив свого талановитого друга Дениса Баликіна, відомого у мережі під ніком BaDeVlad. Він швидко розібрався в чужому коді і відредагував його як слід.
2. У скрипта був дуже серйозний недолік. Скрипт не працював не тільки в Doctype Strict, а й взагалі не підтримував веб-стандарти. Я перепроповував усі доктайпи, - жоден з них не дозволяв появі опадів у вигляді снігу. Пізніше, в коментарях, Олексій Юдін дав рецепт від лікування цієї важкої недуги. Потрібно було вказати одиниці виміру, наприкінці деяких рядків додавши + px;

Як підключити скрипт зі сніжинками на свій хостинг

1. Завантажте скрипт та розмістіть на своєму хостингу.
2. Вкажіть місце, де знаходиться скрипт наступної конструкції

Наприклад, якщо ви покладете скрипт у папку js, яка знаходиться в корені вашого сайту, тоді підключення скрипту буде таким: додайте ось цей рядок до шаблону сайту, наприклад перед тегом body:

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

Після цього створюємо, власне, і сам блоковий контейнер divз ідентифікатором content, в якому будемо запускати наш плагін падіння сніжинок на сайт. З параметрів варто врахувати, що minSizeзадає мінімальний розмір сніжинки 5 пікселям, а максимальний розмір сніжинок maxSizeдорівнює 12 пікселів. Налаштуйте розмір сніжинок на такий, який Вам потрібен.

Другий крок. CSS.

Переходимо до другого кроку, а саме до стилів css. У нашому прикладі, всі стилі, виключно потрібні лише для оформлення, а повноцінної працездатності скрипта, - не потребують! Усі стилі призначені для правильного позиціонування графічного зображення fon.jpgтому вже дивіться самі, потрібні вони Вам чи ні.

Прикрашаємо свій блог до Нового року. Пропоную вашій увазі старий але не забутий і улюблений блогерами віджет СНІЖИНКИ.

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

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

Але це лірика та зайва вода у тексті. Я сама шалено, як ворона, обожнюю в інтернеті всякі штучки-дрючки: смайлики, гіфки, віджети, гаджети і з величезним задоволенням поділюся з Вами, дорогі читачі, своїми знаннями.

Як встановити гаджет « Сніжинки, що падають»

Заходимо Адміністративна панель Blogger > Дизайн > Додати гаджет HTML/JavaScript. У вікно вставляємо код.

Після того, як вставили код у гаджет, бажано підняти його якомога вище. Зробити це не важко, захоплюємо лівою кнопкою мишки гаджет HTML/JavaScript і тягнемо вгору під шаблон і відпускаємо, не вийшло з першого разу, повторіть ще раз.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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