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

本文概述

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

圣诞精神永远都不会消亡, 特别是在电子商务网站上的美味促销中, 圣诞节是购买比平时便宜的凉爽商品的好理由。在某些网站中, 当你输入一年中的特定季节时, 会看到很酷的降雪效果。
作为开发人员, 这通常是不必要的, 因为如上所述, Web浏览器的不必要的资源消耗, 但是你不是决定下雪是否应该出现在网站上的人, 而是客户端, 如果客户端想要这样的话功能, 你唯一能做的就是实现尽可能优化的功能。幸运的是, 由于有了一个开源插件, 它关心每个用户想要的优化和其他效果, 因此你可以使用snowstorm脚本在几秒钟内在项目中实现它。在本文中, 我们将与你分享这个很棒的插件以及如何在你的网站中实现它。
1.下载并包含Snowstorm.jsSnowstorm是JavaScript驱动的降雪效果, 可以轻松添加到网页中。它是免费使用的, 并且易于设置。单个JavaScript文件提供了所需的功能。没有图像用于降雪效果。要将Snowstorm.js包含在你的项目中, 请从资源库下载脚本的副本并将其保存到文件中。或者, 你可以使用rawgit cdn在生产环境中提供文件：

< !-- From a local copy --> < script src="http://www.srcmini.com/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 snowsnowStorm.snowColor = '#fff'; // 2. To optimize, define the max number of flakes that can// be shown on screen at oncesnowStorm.flakesMaxActive = 96; // 3. Allow the snow to flicker in and out of the viewsnowStorm.useTwinkleEffect = true; // 4. Start the snowstorm!snowStorm.start();

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