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特效库，可以方便地给元素添加上滑动出现的效果。大大提高了网站的美观和交互性，并且降低了开发时间和成本。

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

ztext – 简单几行代码创建酷炫3D特效文字的开源JS库

把网页上的文字变成酷炫的 3D 风格，还能制作旋转动效，有了 ztext.js，只需要几行代码。

ztext 能做什么

ztext.js 是一个能把常规的平面文字变成 3D 样式的前端开源代码库，让开发者能通过非常简单的 api 创造出酷炫的 3D 文字效果。配合 CSS 动画，可以实现惊艳酷炫的交互效果。

ztext 官网文档截图

ztext.js 库的特点

• 轻量无依赖，支持原生 javascript 和在 Vue / React 中安装使用
• 性能强劲，兼容性强。基于 CSS 的 transform-style 属性实现，超过98%用户的浏览器都支持，而且用于 CSS transform 的动画性能很高
• 功能强大，适用范围广。不仅适用于任何中西文字体，还支持图片/ svg / Emoji 表情符号

支持图片/svg/表情符号

开发上手体验

在开发 PC 端展示型的页面或应用时，运用合适的特效，能让呈现效果印象深刻。把 banner 上的标题变成 3D，搭配设计精美的元素，是一个很见的需求。而常规的方法是使用 canvas，前端需要加载几M大小的 WebGL 库，折腾数小时才能实现。

ztext.js 就是一个适用于这样场景的 js 库，压缩版本大小仅3.8kb，api 也非常简单，而且官网有详细的代码例子，甚至不需要有太扎实的代码基础，copy 改改就能用，快速创建酷炫的 3D 文字特效。配合鼠标悬停的交互，着实能为产品增色不少。

ztext.js 实现 3D 文字的原理

ztext.js 并没有引入真正的第三方 3D 库来实现三维视图，而是通过从 HTML 元素创建图层，来给人一种立体的错觉，基于 CSS 的 transform-style 属性来还原 3D ，视觉效果非常好，作为用户没有发现任何区别，而且很容易结合 CSS3 动画来使用，能够随时调整角度，非常喜欢这种简单酷炫的方式。

免费开源说明

ztext.js 基于 MIT 开源协议在 Github 上开源，任何人都可免费下载用在自己的项目，包括商业用途。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点【了解更多】查看本次分享的网址。

利用three.js实现大波浪特效

1. 引入所需的库

1. 定义所需变量

1. 定义方法init，用来初始化相机、场景、粒子和渲染器；

1. 定义方法animate，使用requestAnimationFrame进行动画渲染；

1. 定义方法render，用来把所有粒子渲染到场景上；

1. 全部代码如下。

Tips：在官方示例“canvas_particles_waves.html”基础上，修改一些参数和删除一些多余代码。

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