js提供了哪几种网页特效—js有哪些特效 收藏 0

让网站动起来的js库，真漂亮，再也不用写复杂的动画了~wow.js

越来越多的网站特效很漂亮，其中就有一种我很喜欢的动画，就是当滑动到某个元素的时候，元素就是出现动画效果，如：缩放、旋转、滑动等。感觉很漂亮，之前在做企业站的时候，基本上都是自己手写的，有点麻烦而且效果也不是很好，最近发现了一款比较好用的动画库~~~~wow.js，可以轻松的网站具有这种特效。感受一下吧

Wow.js 的动画效果依赖于第三方库，官方推荐的是： Animate.css

当然也可以使用其它的动画库，需要配置一下 wowo.js。这里就以 Animate.css 为例展开介绍了。有兴趣的同学可以尝试使用一下其它的动画库。

• 引入动画库

• 引入并且使用 wow.js

• 配置一下需要使用动画的元素，为元素的class属性添加一个名为 .wow 的class样式

• 从 Animate.css 选择要使用的动画效果

至此，就已经添加好了一个效果了

可以针对时间、延时等一些配置做具体的修改

还可以通过js一些属性

boxClass: 给需要动画效果的元素 设置的class名称，默认是\”wow\”

animateClass: 需要提供动画的库，默认是由 animate.css 提供

offset: 定义距底部还有多少距离时触发动画效果

mobile: 开启是否在手机上使用动画效果

wow.js 使用的 MIT 开源协议，可以免费的使用，不过你的软件如果是有专利或者需要付费的，请记住在您的产品中包含MIT许可证的全部内容。

wow.js 是一款不错的js特效库，可以方便地给元素添加上滑动出现的效果。大大提高了网站的美观和交互性，并且降低了开发时间和成本。

关注我，分享给您实用的前端知识和优秀的组件库~~

免费开源的五彩纸屑飞舞特效的 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 库，多用于在网页上实现欢乐庆祝的场景

520情侣浪漫表白JS特效分享（附源码）

520马上就要到，作为程序员的你是不是也想送个特别的礼物。今天给大家分享一个HTML5+CSS3+jQuery实现的情侣浪漫表白JS特效，视觉效果还是相当不错！得此表白神器，程序猿也可以很浪漫！快去追你的女神吧，把这个告白爱心动画发给你心爱的她！

这个特效主要实现了这几个功能，功能一基于jQuery实现的文字打印动态效果，文字的颜色个样式通过定义不同的CSS样式来控制的。功能二动态生成随机的花瓣并拼成一个爱心图案，通过prototype属性向对象添加属性和方法。功能三爱心中的文字淡入显示，这个主要是利用了fadeIn方法来实现。最后一个功能就是当点击接受时开始计时功能，通过new Date()获取当前时间再把时间差转换为天数、小时数、分钟数和秒数显示即可。

这里的d.html(c.substring(0,b)+(b&1?\”_\”:\”\”))是为了实现打印的动态效果了,当下标index为奇数的时候最后一个字符显示为\”_\”,当为偶数的时候显示\” \”,这样就能形成打印文字的那种动态效果。

这里主要的功能就是创建矢量线，告诉我们花瓣的走向。接着再绘制随机生成的花瓣图案，最后再加上开花的效果。这里的Vector方法绘制了爱心的大致形状，Petal方法则负责绘制随机生成的花瓣，Bloom方法则定义了花瓣的绽放效果。Garden方法为花园入口，负责参数选项配置选项及方法调用以实现爱心图案的生成。

在爱心中间的字体采用了淡入的效果，这里我们可以通过jQuery封装的fadeIn()方法实现淡入效果来显示一个隐藏的元素。文字默认样式通过CSS定义为隐藏状态，fadeIn()由两个参数分别是speed（速度）和callback（回调函数）。当花瓣爱心绘制完成之后我们调用fadeIn方法显示爱心中的内容，回调中继续显示loveu中的内容。

当链接被点击的时候触发timeElapse方法开始计时，这里获取了当前的时间并对时间进行了换算为天数、小时数、分钟数和秒数显示。parse()方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。floor()方法则是对一个数进行向下取整计算，返回的是小于或等于且最接近计算值的整数。

源码说明：本例中的源码非本人创作，本文仅作简单的解析和分享。需要源码的朋友可以在评论区留言，本源码仅限学习参考请勿它用。以上内容是小编给大家分享的【520情侣浪漫表白JS特效分享（附源码）】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。更多Vue实战技巧可以参考专栏：Vue实战系列，在此也非常感谢大家对小编的支持！

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