Как я понял сегодня в тренде "Снегопад на сайте", "Снежинки на сайте", ажиотаж вокруг "Падающего снега" — опять же на сайте.
Поэтому решил описать работу одного виджета немного подробнее.
Работа проверялась на версии 2.2.1, на версиях ниже, возможно будет работать.
Виджет сделан на основе скрипта snowstorm.js.
Добавлены картинки из модуля для первой ветки и символы юникода, немного похожие на снежинки.
Все они расположены во вкладке "Снежинки" в настройках виджета
Если вам нужен только один вид снежинок (не напоминающий падающие шестерёнки и не вызывающий дополнительных ассоциаций), то вы можете отметить галочкой только интересную вам снежинку.
Настройки.
Высота блока анимации — высота от верха страницы в пикселях. Этим можно ограничить высоту падения снежинок, например чтобы они падали только в шапке сайта.
Общее количество снежинок — количество снежинок, которые ещё падают и лежат в сугробе внизу экрана.
Максимальное количество одновременно выпадающих снежинок — максимальное количество снежинок которое может одновременно выпасть. Соответственно, чем меньше, тем процессору легче их сосчитать.
Смещение снежинок по ширине, Смещение снежинок по высоте — сам не совсем понял, что за параметр и в чём измеряется, но похоже это расстояния между снежинками по ширине и высоте соответственно.
Реагировать на движения мышки — взмах "мышкой", меняет направление "ветра".
Останавливать анимацию, если окно не в фокусе — при включенной опции, если вы переключитесь в другое открытое окно, то снежинки зависнут и продолжат падение, когда вы обратите на них своё внимание.
Отключать на мобильных устройствах — опция видимо подразумевает, отключение анимации, если зашли на сайт с мобильного устройства. Но мой планшет видимо, к мобильным не относится.
Налипание снега — интересная опция. Позволяет собрать сугроб внизу экрана, мысленно поиграть в снежки и построить детворе горку прямо в мониторе.
Название CSS класса для снежинок — это если вы хотите их как-то особенно выделить.
CSS селектор блока, в котором выводить снежинки — снежинки будут падать только в указанном блоке.
Эффект таяния снежинок — Если включить, то некоторые снежинки будут таять ещё в полёте.
Эффект мерцания снежинок — ещё один эффект, но у меня он почему-то вызывает больше ассоциации, что с сайтом не всё в порядке, чем лёгкое мерцание снежинок.
Цвет снежинок — тут прописывается цвет снежинок в формате #ffffff. Он применяется только к снежинкам из юникода. Цвет и форму самих картинок-снежинок вы можете изменив файлы в папке — \templates\default\images\snow\.
С цветом снежинок возникла непростая ситуация. На скрине стоит поле "Цвет", а у вас стоит поле "Строка". Не переживайте, в версии 2.5.0 оно автоматически изменится . Просто Fuze, вдруг, неожиданно так, выложил релиз, за что ему отдельное спасибо.
В общем не успели "внестись", некоторые правки. Но тем, кто не хочет ждать версию 2.5.0, но уже сидит на версии 2.4.0, можете внести правки самостоятельно.
Для этого в файле system\widgets\snowstorm\options.form.php в строке 83 строку
заменить на
и в файле templates\default\assets\fields\color.tpl.php строки 2-3
заменить на
Повторюсь, на версиях ниже 2.4.0, такой фокус с полем выбора цвета не пройдет. Это некий стимул вам для установки обновлений .
Для тех, кто уже скачал, желательно скачать заново и перезаписать файлы из папки package/system. Так как была обнаружена ошибка: при включенном кэшировании снежинки не падали.
Поэтому решил описать работу одного виджета немного подробнее.
Работа проверялась на версии 2.2.1, на версиях ниже, возможно будет работать.
Виджет сделан на основе скрипта snowstorm.js.
Добавлены картинки из модуля для первой ветки и символы юникода, немного похожие на снежинки.
Все они расположены во вкладке "Снежинки" в настройках виджета
Все отмеченные снежинки будут случайным образом выбираться и отображаться на страницах, где установлен виджет.
Если вам нужен только один вид снежинок (не напоминающий падающие шестерёнки и не вызывающий дополнительных ассоциаций), то вы можете отметить галочкой только интересную вам снежинку.
Настройки.
Интервал анимации, мс — скорость прокрутки цикла анимации, но зрительно воспринимается как увеличение скорости падения снежинок. Соответственно при меньшей скорости прокрутки цикла, надо больше затрат на вычислительные процессы центрального процессора.
Высота блока анимации — высота от верха страницы в пикселях. Этим можно ограничить высоту падения снежинок, например чтобы они падали только в шапке сайта.
Общее количество снежинок — количество снежинок, которые ещё падают и лежат в сугробе внизу экрана.
Максимальное количество одновременно выпадающих снежинок — максимальное количество снежинок которое может одновременно выпасть. Соответственно, чем меньше, тем процессору легче их сосчитать.
Смещение снежинок по ширине, Смещение снежинок по высоте — сам не совсем понял, что за параметр и в чём измеряется, но похоже это расстояния между снежинками по ширине и высоте соответственно.
Реагировать на движения мышки — взмах "мышкой", меняет направление "ветра".
Останавливать анимацию, если окно не в фокусе — при включенной опции, если вы переключитесь в другое открытое окно, то снежинки зависнут и продолжат падение, когда вы обратите на них своё внимание.
Отключать на мобильных устройствах — опция видимо подразумевает, отключение анимации, если зашли на сайт с мобильного устройства. Но мой планшет видимо, к мобильным не относится.
Налипание снега — интересная опция. Позволяет собрать сугроб внизу экрана, мысленно поиграть в снежки и построить детворе горку прямо в мониторе.
Название CSS класса для снежинок — это если вы хотите их как-то особенно выделить.
CSS селектор блока, в котором выводить снежинки — снежинки будут падать только в указанном блоке.
Эффект таяния снежинок — Если включить, то некоторые снежинки будут таять ещё в полёте.
Эффект мерцания снежинок — ещё один эффект, но у меня он почему-то вызывает больше ассоциации, что с сайтом не всё в порядке, чем лёгкое мерцание снежинок.
Цвет снежинок — тут прописывается цвет снежинок в формате #ffffff. Он применяется только к снежинкам из юникода. Цвет и форму самих картинок-снежинок вы можете изменив файлы в папке — \templates\default\images\snow\.
С цветом снежинок возникла непростая ситуация. На скрине стоит поле "Цвет", а у вас стоит поле "Строка". Не переживайте, в версии 2.5.0 оно автоматически изменится . Просто Fuze, вдруг, неожиданно так, выложил релиз, за что ему отдельное спасибо.
В общем не успели "внестись", некоторые правки. Но тем, кто не хочет ждать версию 2.5.0, но уже сидит на версии 2.4.0, можете внести правки самостоятельно.
Для этого в файле system\widgets\snowstorm\options.form.php в строке 83 строку
if ($version['major'] >= 2 && $version['minor'] >= 5){
if ($version['major'] >= 2 && $version['minor'] >= 4){
$this->addJS('templates/default/js/colorpicker.js'); $this->addCSS('templates/default/css/colorpicker.css');
$this->addJSFromContext('templates/default/js/colorpicker.js'); $this->addCSSFromContext('templates/default/css/colorpicker.css');
Для тех, кто уже скачал, желательно скачать заново и перезаписать файлы из папки package/system. Так как была обнаружена ошибка: при включенном кэшировании снежинки не падали.
Реклама #
Loadырь 8 лет назад #
solntsev 8 лет назад #
Pasha 8 лет назад #
Loadырь 8 лет назад #
Soul 8 лет назад #
solntsev 8 лет назад #
Владимир Савенко ✝️ 8 лет назад #
Def 8 лет назад #
пишет, что установлено, но в компонентах не вижу его
Loadырь 8 лет назад #
Def 8 лет назад #
R161Net 4 года назад #
Loadырь 4 года назад #
R161Net 4 года назад #
С Наступающим все!
R161Net 4 года назад #
Ура!
Александр 4 года назад #
Алексей Т 4 года назад #
Все гуд!
Loadырь, спасибо!