Сніжинки, що падають на сайт - як зробити ефект падіння сніжинок за допомогою плагіна і скрипту,
Всім привіт дорогі друзі! Хоч і скінчилася зима, але все одно хочу розповісти вам як створити сніжинки, що падають на сайті WordPress, щоб трохи згадати зимові дні :-). Робити падаючі сніжинки ми будемо за допомогою скрипту та плагіна.
Тобто в цій статті розберемо два абсолютно працюючі способи. Там ви вже вирішите собі який варіант вам краще. Тож давайте приступимо до практичної частини уроку.
Як зробити падіння сніжинки WordPress за допомогою плагіна?
Отже, зайдемо до розділу Плагіни – Додати Новий та встановимо плагін падаючих сніжинок для WordPress.
Чудово! Плагін ми встановили та активували. Після цього в лівій частині панелі адміністратора WordPress з'явиться розділ Super Snow.
Перейшовши всередину, ви побачите, що плагін відключений і його потрібно включити.
Зараз ми з вами пробіжимося основними налаштуваннями.
Virtual Snow Blower
У цій секції ви можете задавати розміри падаючих сніжинок та їх кількість, додавати свій варіант сніжинок, вказувати в якому тезі вони мають бути встановлені. За замовчуванням все міститься в тезі body. Ви можете його перевизначити. Також можете вказати затримку в секундах падіння сніжинок на сайті, ефекти.
Наступна остання опція – це відображення падаючих сніжинок на сторінках та постах. Пам'ятайте, що на мобільних пристроях снігу не буде, тому що він там просто виключений.
Наприклад, ви можете запускати падаючі сніжинки тільки на специфічних сторінках, вказавши це за допомогою спеціальної функції (Вони наведені на сторінці)
Ось приклади функцій:
! wp_is_mobile () && is_page ( 'christmas-promo' ) — якщо ця сторінка не є мобільною, то показувати на сторінці Christmas-promo
! wp_is_mobile ( ) && ! is_ssl ( ) – не показувати якщо це не мобільний пристрій та не захищений протокол https та SSl
Після всіх дій та проведених налаштувань ми натискаємо на «Зберегти зміни».
Ось що у вас приблизно вийде у браузері.
Вийшли великі, сніжинки, що повільно падають, на тестовому сайті 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 для шторму. Випадкова величина в цьому діапазоні вибирається для кожного сніжинки.