Эффект падающего снега Практика

Арт блог

Эта анимация была одной из первых анимаций, созданных с использованием ActionScript во Flash много лет назад. Ниже приведены варианты подобных эффектов для HTML, CSS и JavaScript.

На этом семинаре вы узнаете, как быстро добавить подобные эффекты на свой сайт. маркировки и как следующий код заставляет этот результат работать.

Добавляем эффект падающего снега

В нижней части страницы (ярлык закрытия выше ) добавьте следующий код.

После добавления кода убедитесь, что он работает, открыв веб-сайт в браузере. Пример анимированной страницы.

Цвета снежинок определяются в классе CSS .snowflake.

Измените значение свойства "Цвет фона" на любой цвет. В данном примере установлено значение #fffffffff (Белый; если вы хотите использовать этот эффект на более открытом фоне, вам следует изменить цвет снежинки на более подходящий.

Чтобы настроить количество снежинок, найдите различные числовые значения в коде JavaScript.

В настоящее время цена установлена на уровне 50. Измените на большее или меньшее число в зависимости от требуемого результата.

Как работает анимация: обзор кода

Этот эффект работает очень просто. Каждая снежинка (наш предмет) меняет свое местоположение и размер много раз в секунду. Эти изменения составляют основу анимации.

Основа процесса находится в HTML, где определяется снежинка.

Как работает анимация: обзор кода

Используя код, эту уникальную снежинку часто клонируют. Численное значение определяется значением переменной числа.

Как работает анимация: обзор кода - 2

В процессе клонирования снежинок мы немного меняем их внешний вид.

Эффект падающего снега Практика

Мы проанализируем использованный код в следующем разделе.

ЧИТАТЬ ЕЩЁ:  Виджеты для сайта - 10 виджетов, которые улучшат функционал сайта

Как работает анимация: детальное изучение

Мы начнем с анализа HTML-кода.

Разметка определяет элемент SnowflakeContainer, который имеет элементы, принадлежащие классу Snowflake. Это весь HTML-код, который явно указан в документации.

Отправная точка

В коде JavaScript вызывается функция setup.

Сначала проверяется, активно ли движение. Затем он должен спросить о двух событиях. После активации события DomContentLoaded необходимо вызвать GeneratesNowFlakes. Если размер окна браузера был изменен, вызовите setresetflag.

Генерируем снежинки

Теперь нужно взять уникальный набор снежинок в HTML-коде и использовать его в качестве модели для множества снежинок. За это отвечает функция GenatesNowflakes: за это отвечает функция GenatesNowflakes.

Этот код выглядит следующим образом.

  1. Создайте клон снежинки в DOM.
  2. Определите случайную начальную позицию для снежинки (в зависимости от текущего размера окна браузера).
  3. Определяет случайную скорость, с которой падает снежинка, и
  4. начинается анимация.

Все эти действия повторяются для каждой созданной снежинки. Одним из результатов выполнения следующего кода является новый элемент снежинки.

Он содержит не только ссылку на DOM-представление элемента снежинки, но и значения скорости и положения, созданные несколькими строками ранее.

Генерируем снежинки

После создания снежинки этот объект сохраняется для дальнейшего использования и "прячется" в таблице снежинок. Это происходит в цикле. Она выполняется для каждой снежинки.

Последнее, что происходит в функции GeneratesNowflakes, — это вызов MovesNowFlakes, которая отвечает за перемещение снежинок.

Цикл анимации

Все движущиеся изображения на основе JavaScript имеют цикл перемещения. Он отвечает за многократное выполнение и содержит код, необходимый для того, чтобы побудить что-то произойти. Функция moveSnowflakes — это цикл движения.

Главное, что происходит в этом мультяшном цикле, — это код для обновления Снежинок.

Он проходит по всем снежинкам в таблице Snowflakes и вызывает метод update.

ЧИТАТЬ ЕЩЁ:  20 лучших бесплатных ресурсов для дизайнеров

Реализация Snowflake

Сложность создания анимации снежинки заключается в определении объекта Snowflake. Когда снежинка впервые создается с помощью функции generateSnowflakes, вызывается следующий код.

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

Выполнение метода update (который вызывает цикл движения moveSnowflakes) изменяет значение свойства. Метод обновления заключается в следующем.

Большая часть этого кода отвечает за колебание снежинки при падении на землю. Это колебание возможно благодаря использованию тригонометрических функций sin и cos. Здесь также используется свойство счетчика. Он отвечает за скорость, с которой движется снежинка.

Все эти числовые значения свойств являются частью объекта "Снежинка". Однако они фактически не влияют на элементы DOM Snowflake, которые отображаются на экране. Поэтому используется функция setTransform.

Устанавливаем позицию и размер снежинки

Функция setTransform принимает все вычисления, выполненные методом обновления, и преобразует их в значения положения и размера снежинки.

Он устанавливает свойство transform для элемента DOM, представляющего каждую снежинку. Он также устанавливает горизонтальное и вертикальное положение с помощью функции translate3d.

Также вызовите функцию масштабирования, чтобы настроить размер падающей снежинки.

Специальные возможности и анимации

Значение свойства enableAnimations поддерживает состояние настройки "специальные функции". Некоторые пользователи испытывают тошноту при просмотре анимации падающих снежинок. В большинстве операционных систем есть настройка "специальные возможности", которая позволяет пользователям уменьшить количество анимаций.

Код, в котором используется enableAnimations, выглядит следующим образом.

Настройка параметра 'special features' представлена в системе для уменьшения скорости анимации свойством prefers-reduced-motion.

Устанавливаем анимацию падающего снега в любой контейнер

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

ЧИТАТЬ ЕЩЁ:  5 быстрых приемов Photoshop, которые помогут исправить плохой фотопортрет

Заключение

Теперь мы увидели, как можно объединить HTML, CSS и JavaScript для создания эффекта анимации падающего снега.

Оцените статью