js特效代码大全下载,炫酷的js特效代码 收藏 0

免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上欢乐庆祝场景

今天看科技周刊看到的一个酷炫的动效库，使用简单，视觉效果很好，推荐给大家。

Canvas Confetti 是一个基于 JavaScript 的特效动画库，可以在网页界面上轻松地实现五彩纸屑飞舞的庆祝场景特效。这个特效库封装了几种酷炫的特效，开发者通过简单的几行代码就可以实现这些动效。

基础效果

• 内置的粒子系统、模拟重力、衰减、漂移等算法，完美模拟了纸屑飘落的效果，呈现出了媲美游戏的视觉效果；
• 五彩飞舞动画基于 HTML5 的 canvas 元素实现，兼容性不错；
• 除了内置的纸屑，也支持自定义纸屑的形状，图片、SVG和文字都支持；

我们都知道 CSS3 的动画很强大，但想要实现类似于抛撒碎纸屑这么复杂的动画时，CSS3 来实现就显得很困难了，以前我遇到这种需求，都是考虑通过 hilo.js 这样的 H5 游戏引擎中的粒子系统来实现。不过今天看阮一峰老师的科技周刊，看到他推荐了一款专门用来实现抛撒五彩纸屑动效的工具库，研究了一下发现效果很好，使用也简单，于是决定写一篇文章推荐给大家。

也可以在 HTML 的直接引入 js 文件：

通过下面几行代码就可以简单实现一个抛撒五彩纸屑的特效动画：

Canvas Confetti 的动画是在网页上创建了一个铺满全屏的画布（canvas），这个 canvas 是无法响应事件的，比如无法点击，这样就相当于覆盖了一个纯视觉的动画层，完全不影响原有的网页界面。

需要注意的是，Canvas Confetti 是一个 JS 工具库，但只能运行在客户端（浏览器环境），是不能运行在 Node.js 这样的服务端的。另外，Canvas Confetti 实例化后的对象返回的是 Promise 对象，现代浏览器都支持，但老旧的浏览器（如 IE）是不支持的，如果要在这些浏览器上运行，一般需要使用 Promise 的 polyfills 来保证正常支持 Promise。

一般来说，只需要搞懂下面几个参数就可以满足场景的庆祝场面，我总结了一下，见下面的表格：

主要参数说明

烟花效果

即把五彩纸屑替换成金色的星星。

粒子图案是星星

下面代码实现的是让白色的纸屑像雪花一样飘落满屏的效果，多在浪漫温馨的场景中使用。

雪花飘落效果

总之这个工具库功能真的很强大，上面几个都是很酷炫的效果，更多效果可以自己去尝试。

Canvas Confetti 是一个免费开源的 JS 动画特效工具库，项目源码基于 ISC 许可协议托管在 Github 上，我们可以自由地下载来使用，也可以免费授权用于商业项目。

↓↓点击查看本次分享的网站。

Canvas Confetti – 免费开源的五彩纸屑飞舞特效的 JS 库，多用于在网页上实现欢乐庆祝的场景

55个JS代码让你轻松当大神

本文从简单到复杂列出了前端常用的一些代码段。善用这些代码可以让你的代码更高雅，别人更难懂。你就是公司的护城河，你就是前端的顶梁柱。

1. 数组平铺。这是一个很实用的让复杂的数组快速变成一个常用数组的技巧。arr参数不管是一维数组还是多维数组，经过转变之后最终都会变成一维数组。

1. 手动延时xx毫秒。在异步请求编程中，有时候要用到让进程等待的情况，用这个函数可以设定等待多少毫秒。

1. 把数组内容随便换个位置。可以用来生成随机位置的内容，比如洗牌这种场景。

1. 数组去重。原理就是先转成Set对象，自动去掉重复的部分，再转回数组。

1. 一键给网页上边框。常用于调试的时候，看一下DOM的框是不是自己要的，其中颜色是随机生成的。也可以自己改一下变成固定颜色的边框。

效果如下：

6. 一键查看密码。同理也可以自己修改，这里用代码的方式来查看。原理是input框虽然是type=password的，但是内容并没有加密，只要换成text就会正常显示。

1. 一键去掉鼠标的图标，让人摸不着头脑的操作。一般用于防止别人调试自己的网页。

1. 检查一个日期是否是在周末。常用于判断当前日期是否是周末，一般场景下还会叠加一个判断是否节假日。

1. 检查一个日期是否在某个年份内。通过获取参数日期的年和需要比较的日期的年来进行比较。如果年的参数比较规范，可以不转一次Date对象，直接比较即可。

1. 检查日期是否是一个有效日期。原理是用参数来创建日期，看日期是否有效。

1. 计算两个日期之间的时间间隔。这里计算的是天，也可以自己改成其他的。

1. 获取日期从年初到现在入参有多少天。入参是Date对象，通过比较获得时间差，默认是毫秒。这里除以一天的毫秒数获得了天数。

1. 返回日期的时间部分，并设置格式为hh:mm:ss的形式。

1. 把字符串的首字母大写。有时候网页展示的时候会用得到。

1. 字符串反转。一般没啥用，看看就行。以前面试的时候会用的到。

1. 生成随机字符串，各种随机基本都是这个原理。

1. 按照参数阶段字符串的长度，如果长度不够就不截取。一般代码中自己写也行，但是要多写一个逻辑判断。

1. 删除字符串中的HTML内容。一般情况下用来防止富文本内容中注入了js代码、去掉不需要的内容等。

1. 判断一个数组是否为空。这里一方面是判断是否为数组，另一方面是判断数组内容。

1. 数组合并，两个数组合并成一个数组。下面是两种方法，都有用，只是用到的语法不同。

1. 判断数字是奇数还是偶数，同理还可以判断是否可以被3整除之类的。

1. 计算一组数字的平均值。具体就是所有数字相加再被数量除一次。

1. 获得一个随机数。第一个是从0开始到数字之间，第二个是两个数字之间。注意最后的加法是独立算数，修改的时候别改错地方了。

1. 按照指定位数四舍五入。如果没有要求，第二种也是很好用的。

1. 获取一个随机颜色。

1. 使用浏览器的原生API复制内容到剪贴板。有的浏览器可能有兼容问题。

1. 清除Cookie。老方法了，可以挨个清除cookie的内容。

1. 使用浏览器原生的API获得用户框选的文本内容。

1. 检查当前环境是否黑暗模式。CSS的检查也是这个原理。

30.让页面返回浏览器顶部。

1. 检测当前标签页是否处于激活模式。

1. 检测当前设备是否苹果设备。同理还有微信浏览器、支付宝浏览器等。

1. 判断当前页面是否在底部了。

1. 打开浏览器的打印模式。

1. 检测一个对象是否为空。

1. 前端自己生成18位的UUID。用到的时候就用到了，一般情况下用不到，哈哈。

1. RGB形式的颜色转成16进制的颜色。

1. HEX形式的颜色转RGB形式的颜色。

1. 网易音乐的web端启用下载功能（标准音质）。

1. 前端自己计算内容的SHA256值。

1. 浅拷贝。简单使用场景下的方式。

1. 深拷贝。多层级下的内容都可以处理到。function不行，那个要单独处理。

1. 自己实现一个单向链表。面试的时候会用到，一般情况下有这个思维就可以了。

1. 自定义方式的数组排序。

1. useMap。实现一个自动处理Map对象的hook。

1. useSet。实现一个自动处理内部数据的Set对象。

1. useDefault。有内容使用设置的内容，没有内容使用默认的内容。

1. useMergeState。实现一个合并内容的对象，常见对象的自动更新。

1. useDebounce。实现一个React的防抖。

1. useForm。实现一个React的Form对象，自动管理Form内容。

1. useEventListener。实现一个自动监听函数，可以监听鼠标移动。

1. useKeyPress。实现一个键盘对应的键的事件监听函数。

1. useHover。实现一个鼠标悬停事件的监听函数。

1. useRequestAnimationFrame。实现一个RequestAnimationFrame函数在React中使用的方法。

1. useBodyScrollLock。实现一个自动锁定滚动条的函数。一般弹窗会用的上。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com