如何使用JavaScript在你的网站上实施暴风雪(Snow Effect)

本文概述

• 1.下载并包含Snowstorm.js
• 2.初始化暴风雪

圣诞精神永远都不会消亡, 特别是在电子商务网站上的美味促销中, 圣诞节是购买比平时便宜的凉爽商品的好理由。在某些网站中, 当你输入一年中的特定季节时, 会看到很酷的降雪效果。

作为开发人员, 这通常是不必要的, 因为如上所述, Web浏览器的不必要的资源消耗, 但是你不是决定下雪是否应该出现在网站上的人, 而是客户端, 如果客户端想要这样的话功能, 你唯一能做的就是实现尽可能优化的功能。幸运的是, 由于有了一个开源插件, 它关心每个用户想要的优化和其他效果, 因此你可以使用snowstorm脚本在几秒钟内在项目中实现它。在本文中, 我们将与你分享这个很棒的插件以及如何在你的网站中实现它。

1.下载并包含Snowstorm.js

Snowstorm是JavaScript驱动的降雪效果, 可以轻松添加到网页中。它是免费使用的, 并且易于设置。单个JavaScript文件提供了所需的功能。没有图像用于降雪效果。要将Snowstorm.js包含在你的项目中, 请从资源库下载脚本的副本并将其保存到文件中。或者, 你可以使用rawgit cdn在生产环境中提供文件：

<!-- From a local copy -->
<script src="snowstorm-min.js"></script>

<!-- Using a free CDN -->
<script src="https://cdn.rawgit.com/scottschiller/Snowstorm/master/snowstorm-min.js"></script>

有关此库的更多信息, 请访问Github上的官方存储库或官方网站以查看演示。

2.初始化暴风雪

包含暴风雪脚本后, 你只需对其进行初始化。该脚本在窗口中全局公开了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();

start方法将在页面顶部显示动画化的雪景效果。即使在现代计算机上, 暴风雪也会吞噬大量CPU, 这是因为一次要在屏幕上移动的元素数量很大。基本示例的CPU使用量可能会明显降低, 因为它不包含圣诞灯, 而且页面布局要简单得多。考虑增加动画间隔, 并减少雪花数量(活动雪花和最大雪花)以帮助减少CPU使用率。

编码愉快！