Найти в Дзене
Финты WordPress

☃️ Про снежинки

5 лет назад был такой пост про снежинки на сайте. Вроде бы и время идет, технологии меняются, людям все равно нравиться на сайте снежинки подключать. Понимаю. Сам такой, люблю какой-нибудь фигней заниматься) Опять же, атмосфера праздника и всё такое. Снежинки - это не плохо и не хорошо, это так есть. Опять же, очень залипательно. Но, дьявол как всегда в деталях. Тот скрипт который более менее работал 5 лет назад (хотя он и сейчас работает) уже использовать не правильно. Можете сами проверить как он работает, просто открываете деатулз и в районе подвала сможете увидеть порядка 50+ загруженных картинок (сами снежинки), которым через js прислюнивается анимация. Такое себе решение, мягко говоря. Особенно для мобильных устройств. Так кстати еще прикольный баг есть - если при нажатии на кнопку попасть по снежинке, то клика не происходило, то есть снежинки перекрывали элементы сайта. Так как, у меня уже традиционно в новогодние праздники проводиться работа по собственным проектам, решил с

☃️ Про снежинки

5 лет назад был такой пост про снежинки на сайте. Вроде бы и время идет, технологии меняются, людям все равно нравиться на сайте снежинки подключать.

Понимаю. Сам такой, люблю какой-нибудь фигней заниматься) Опять же, атмосфера праздника и всё такое.

Снежинки - это не плохо и не хорошо, это так есть. Опять же, очень залипательно.

Но, дьявол как всегда в деталях. Тот скрипт который более менее работал 5 лет назад (хотя он и сейчас работает) уже использовать не правильно. Можете сами проверить как он работает, просто открываете деатулз и в районе подвала сможете увидеть порядка 50+ загруженных картинок (сами снежинки), которым через js прислюнивается анимация. Такое себе решение, мягко говоря. Особенно для мобильных устройств. Так кстати еще прикольный баг есть - если при нажатии на кнопку попасть по снежинке, то клика не происходило, то есть снежинки перекрывали элементы сайта.

Так как, у меня уже традиционно в новогодние праздники проводиться работа по собственным проектам, решил сделать переписать снежинки.

Написано все с нуля. Теперь это в виде плагина, с новым скриптом. Все работает на canvas, очень быстро и незаметно. Скрипт занимает 7кБ.

👀 Гарантирует наличие только одного экземпляра холста на странице, предотвращая утечки памяти и дублирование анимаций.

👀 Автоматически рассчитывает количество снежинок в зависимости от площади экрана (адаптивная плотность).

👀 Плавный и оптимизированный цикл отрисовки.

👀 Автоматическая пауза анимации при переключении вкладки браузера.

👀 Параметр pointer-events: none гарантирует, что снег не мешает кликам по кнопкам и ссылкам

Опций в админке нет. Но есть фильтр art_snowfall_settings через который можно их менять. Подробности в документации.

📂Документация и примеры