Добавляем на DTF новогоднее настроение 🎄

Как и обещал, написал гайд к предыдущему посту :-) всего 7 минут и ваш собственный снегопад в браузере готов.

Расскажу на примере браузера Chrome. Для него есть расширение User JavaScript and CSS – позволяет запускать скрипты на любых сайтах. Можно выбрать любое другое расширение запуска скриптов.

Устанавливаем:

Переходим в Хроме в «Настройки > Расширения», там включаем «Режим разработчика» в верхнем правом углу:

Готово! Теперь наш браузер умеет запускать наши собственные скрипты на сайтах 🎉

Открываем параметры нашего расширения, чтобы запилить туда скрипт. В Хроме выглядит так:

Откроется окошко, в котором можно вставить наш скрипт:

Вставляем в это окошко такой простой скрипт:

Скрипт делает простые вещи: создаёт снежинки поверх сайта, а затем по таймеру регулярно двигает их вниз. Анимация учитывает размер снежинок – большие двигаются быстрее, а маленькие могут даже останавливаться на некоторое время. Если снежинка дошла до низа, она снова перемещается наверх в случайное место. Так и получается эффект снегопада.

Окей, осталось совсем немного. Укажем адрес сайта для запуска скрипта и сохраним:

Всё готово – открываем DTF и наслаждаемся:

Чтобы поменять интенсивность снегопада, меняйте строчку:

Она определяет количество частиц на экране. В данном случае задаётся значение "ширина вашего окна разделённая на 30". Если хотите усилить снегопад, делите на меньшее число. Например, так:

После сохранения скрипта получится более интенсивный снегопад:

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

Теперь меняем размер частиц. Для этого нужна строчка:

Здесь рандомайзер создаёт нам частицы размером от 1 до 4. Давайте поменяем их, например, на частицы от 3 до 8 – это будет выглядеть так:

Результат:

Как видите, частицы получились более крупными.

И, напоследок, можете убрать скругления, если вам нужен квадратный снег. Для этого ищем строчку:

И удаляем её, чтобы не было скруглений. Получатся квадратные снежинки:

Вообще, если немножко шарите в CSS-стилях, можно настроить абсолютно любые элементы, создать любые формы, цвета и размеры частиц.

Пробуйте :) Если что-то не получается – пишите в комменты, постараюсь всем ответить.

p.s. Гайд создан по фану с помощью кофе, ночного джаза и моего любимого кота))

#scripting #вайб #новыйгод #снегопад #javascript #css #dtf #анимация