Дух Рождества никогда не должен умирать, особенно благодаря тем вкусным акциям на веб-сайтах электронной коммерции, где Рождество является хорошей причиной, чтобы покупать классные вещи действительно дешевле, чем обычно. На некоторых веб-сайтах вы увидите эффект прохладного снега, когда будете входить в определенное время года.
Как разработчик, это обычно излишне, учитывая, что, как уже упоминалось, неоправданно расходуются ресурсы веб-браузера, однако вы не тот, кто решает, должен ли снег появляться на веб-сайте или нет, а клиент, и если клиент этого хочет функция, единственное, что вы можете сделать, это реализовать настолько оптимизированную, насколько это возможно. К счастью, благодаря плагину с открытым исходным кодом, который заботится об оптимизации и других эффектах, которые захотят каждый пользователь, вы сможете реализовать его в течение нескольких секунд в своем проекте с помощью сценария snowstorm. В этой статье мы расскажем вам об этом удивительном плагине и о том, как внедрить его на вашем сайте.
1. Скачайте и включите Snowstorm.js
Snowstorm — это снежный эффект на основе JavaScript, который можно легко добавить на веб-страницы. Он бесплатный для использования и прост в настройке. Один файл JavaScript обеспечивает необходимую функциональность. Изображения не используются для эффекта снега. Чтобы включить Snowstorm.js в ваш проект, скачать копию скрипта из репозитория и сохранить его в файл. Кроме того, вы можете использовать rawgit cdn для обслуживания файла:
Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь или же официальный сайт, чтобы увидеть демо.
2. Инициализировать Метель
После включения скрипта Snowstorm вам нужно только инициализировать его. Сценарий предоставляет глобально переменную snowStorm в окне, объект, который предлагает множество методов и настраиваемых свойств (чтобы знать их все, читать документы на официальном сайте здесь):
// 1. Define a color for the snow
snowStorm.snowColor = '#fff';
// 2. To optimize, define the max number of flakes that can
// be shown on screen at once
snowStorm.flakesMaxActive = 96;
// 3. Allow the snow to flicker in and out of the view
snowStorm.useTwinkleEffect = true;
// 4. Start the snowstorm!
snowStorm.start();Метод запуска покажет вверху страницы анимированный эффект снега. Snowstorm может потреблять много ресурсов ЦП даже на современных компьютерах из-за количества элементов, перемещаемых по экрану одновременно. Базовый пример может иметь заметно более низкую загрузку ЦП, поскольку он не включает рождественские огни, а макет страницы намного проще. Попробуйте увеличить интервал анимации и уменьшить количество снежинок (активных и макс.), Чтобы уменьшить использование ЦП.
