Виджет Снежинки на сайте для 2.3.х.

+15
3.4K
Как я понял сегодня в тренде "Снегопад на сайте", "Снежинки на сайте", ажиотаж вокруг "Падающего снега" — опять же на сайте.
Поэтому решил описать работу одного виджета немного подробнее.

Работа проверялась на версии 2.2.1, на версиях ниже, возможно будет работать.


Виджет сделан на основе скрипта snowstorm.js.
Добавлены картинки из модуля для первой ветки и символы юникода, немного похожие на снежинки.
Все они расположены во вкладке "Снежинки" в настройках виджета
Иллюстрация
Все отмеченные снежинки будут случайным образом выбираться и отображаться на страницах, где установлен виджет.
Если вам нужен только один вид снежинок (не напоминающий падающие шестерёнки и не вызывающий дополнительных ассоциаций), то вы можете отметить галочкой только интересную вам снежинку.

Настройки.

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

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

Общее количество снежинок — количество снежинок, которые ещё падают и лежат в сугробе внизу экрана.

Максимальное количество одновременно выпадающих снежинок — максимальное количество снежинок которое может одновременно выпасть. Соответственно, чем меньше, тем процессору легче их сосчитать.

Смещение снежинок по ширине, Смещение снежинок по высоте — сам не совсем понял, что за параметр и в чём измеряется, но похоже это расстояния между снежинками по ширине и высоте соответственно.

Реагировать на движения мышки — взмах "мышкой", меняет направление "ветра".

Останавливать анимацию, если окно не в фокусе — при включенной опции, если вы переключитесь в другое открытое окно, то снежинки зависнут и продолжат падение, когда вы обратите на них своё внимание.

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

Налипание снега — интересная опция. Позволяет собрать сугроб внизу экрана, мысленно поиграть в снежки и построить детворе горку прямо в мониторе. smile

Название CSS класса для снежинок — это если вы хотите их как-то особенно выделить.

CSS селектор блока, в котором выводить снежинки — снежинки будут падать только в указанном блоке.

Эффект таяния снежинок — Если включить, то некоторые снежинки будут таять ещё в полёте.

Эффект мерцания снежинок — ещё один эффект, но у меня он почему-то вызывает больше ассоциации, что с сайтом не всё в порядке, чем лёгкое мерцание снежинок.

Цвет снежинок — тут прописывается цвет снежинок в формате #ffffff. Он применяется только к снежинкам из юникода. Цвет и форму самих картинок-снежинок вы можете изменив файлы в папке — \templates\default\images\snow\.

С цветом снежинок возникла непростая ситуация. На скрине стоит поле "Цвет", а у вас стоит поле "Строка". Не переживайте, в версии 2.5.0 оно автоматически изменится smoke. Просто Fuze, вдруг, неожиданно так, выложил релиз, за что ему отдельное спасибо.
В общем не успели "внестись", некоторые правки. Но тем, кто не хочет ждать версию 2.5.0, но уже сидит на версии 2.4.0, можете внести правки самостоятельно.
Для этого в файле system\widgets\snowstorm\options.form.php в строке 83 строку
  1. if ($version['major'] >= 2 && $version['minor'] >= 5){
заменить на
  1. if ($version['major'] >= 2 && $version['minor'] >= 4){
и в файле templates\default\assets\fields\color.tpl.php строки 2-3
  1. $this->addJS('templates/default/js/colorpicker.js');
  2. $this->addCSS('templates/default/css/colorpicker.css');
заменить на
  1. $this->addJSFromContext('templates/default/js/colorpicker.js');
  2. $this->addCSSFromContext('templates/default/css/colorpicker.css');
Повторюсь, на версиях ниже 2.4.0, такой фокус с полем выбора цвета не пройдет. Это некий стимул вам для установки обновлений smile.
Для тех, кто уже скачал, желательно скачать заново и перезаписать файлы из папки package/system. Так как была обнаружена ошибка: при включенном кэшировании снежинки не падали.
Падающий снег
Виджет

Падающий снег

Скачать 2 392 загрузки
0
Loadырь Loadырь 8 лет назад #
Ух ты, а тут скидка не показывается. Народ, цена дико страшная shock , поэтому пользуйтесь, пока скидки действуют.
+1
solntsev solntsev 8 лет назад #
За скидку отдельное спасибо. dance
+1
Pasha Pasha 8 лет назад #
Жирная восьмиконечная каплеобразная звездочка-пропеллер
Loadырь, что вы курили? Я тоже такое хочу.
0
Loadырь Loadырь 8 лет назад #
Могу и вам отсыпать
0
Soul Soul 8 лет назад #
Ух ты, а тут скидка не показывается. Народ, цена дико страшная
Loadырь, не шутите так! "закрался" в нашем сообществе человечек, который не понимает шуток :)
Loadырь, что вы курили? Я тоже такое хочу
Pasha, зачем Вам это? хотите посоветую "наркотик посильнее" ( сам на нем " сижу", при использовании - 100% летальный исход) - называется ЖИЗНЬ smile .
0
solntsev solntsev 8 лет назад #
Я все понимаю. Это «сарказм»!
0
Владимир Савенко ✝️ Владимир Савенко ✝️ 8 лет назад #
Красиво сказано. При определенных условиях жизнь - еще та эйфория!!!
0
Def Def 8 лет назад #
на 2.4.0 почему то не поставилось после обновления движка с 2.3.0 на 2.4.0(

пишет, что установлено, но в компонентах не вижу его
0
Loadырь Loadырь 8 лет назад #
yury:
но в компонентах не вижу его
ищите его в виджетах
0
Def Def 8 лет назад #
а, гаше, это настройки виджета)
0
R161Net R161Net 4 года назад #
Ребята! Виджет актуален, дайте скачать.. В Дополнениях не нашел! Здесь ссылка на ошибку 404..
0
Loadырь Loadырь 4 года назад #
Актуален, перезалил файл
0
R161Net R161Net 4 года назад #
И как всегда ОГРОМНОЕ СПАСИБО!
С Наступающим все!
0
R161Net R161Net 4 года назад #
Блин как красиво! А у нас снега нет.. А на сайте есть!
Ура!
0
Александр Александр 4 года назад #
вот это правильно, снег надо брать только у Loadырь
0
Алексей Т Алексей Т 4 года назад #
На Инфимере - Конструкторе тем - работает http://2.iscms.ru
Все гуд!
Loadырь, спасибо!

Еще от автора

Конструктор форм iForms: онлайн калькулятор
Краткая инструкция, по созданию онлайн калькуляторов с помощью конструктора форм.
Конструктор форм iForms. Добавление записи в типы контента гостем.
С момента моей прошлой записи на эту тему прошло больше двух лет. За это время двойка претерпела немало изменений.
Редактор разметки iTiny
Шо! Опять! (c)))
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.