在线客服

电话①:189 6508 9135(张先生)
电话②:134 0599 8886(何小姐)
电话③:0591-83489135

技术文章


网站页面滚动时添加动画效果CSS和WOW.JS


通过 WOW.js ,可以在向下滚动的过程中逐渐释放这些动画效果。

Animate动画效果演示网址:http://www.fzyxwl.com/t/animate/

下载WOW.js+Animate.css【本站下载

默认情况下,当你向下滚动页面时,可以逐渐展示出 CSS 动画。它一般使用 animate.css 的动画效果。但是,您可以轻松设置成您喜欢的动画库。

优点:比其他 JavaScript 视觉插件更轻量级,像 Scrollorama (这个太重了,其实我们的需求都是非常简单的)超简单的安装,与animate.css配合,只需几行代码即可。

网站页面滚动时添加动画效果CSS和WOW.JS

设置WOW.js

1、链接到CSS动画库

链接到 Animate.css(可以通过更改WOW.js设置链接到另一个CSS动画库)

<link rel="stylesheet" href="css/animate.css">

2、链接并激活WOW.js

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

显示CSS动画

1、使元素易于显示

将CSS类.wow添加到HTML元素:在用户滚动显示它之前,它将不可见。
(您可以在WOW设置中更改此CSS类,以避免名称冲突。)

<div class="wow">
Content to Reveal Here
</div>

2、选择动画样式

在Animate.css中选择一种动画样式 ,然后将CSS类添加到HTML元素中

<div class="wow bounceInUp">
Content to Reveal Here
</div>

你完成了!

现在,当用户滚动时,您的动画将显示出来。

高级选项

data-wow-duration:更改动画的持续时间
data-wow-delay:动画开始之前的延迟
data-wow-offset:启动动画的距离(与浏览器底部有关)
data-wow-iteration:动画的次数重复

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>
<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>

自定义设置

boxClass:类名,在用户滚动时显示隐藏的框。

animateClass:触发CSS动画的类名称(animate.css库默认为“ animated”)

offset:定义浏览器视口底部与隐藏框顶部之间的距离。
当用户滚动并到达此距离时,隐藏的框会显示出来。

mobile:在移动设备上打开/关闭WOW.js。

live:在页面上同时检查新的WOW元素。

wow = new WOW(
{
boxClass:     'wow',      // default
animateClass: 'animated', // default
offset:       0,          // default
mobile:       true,       // default
live:         true        // default
}
)
wow.init();



相关文章

首页  电话  在线咨询  顶部