wow.js实现炫酷的页面滚动伴随动画示例详解

“wow.js实现炫酷的页面滚动伴随动画示例详解”攻略

什么是wow.js

wow.js是一款可以实现页面滚动伴随动画效果的JavaScript插件。它可以让我们通过添加CSS类来触发动画效果。

使用wow.js的步骤

1. 在HTML文件中引入animate.css和wow.js文件。

<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>

1. 初始化wow.js，调用new WOW()。

<script>
  new WOW().init();
</script>

1. 在需要添加动画效果的HTML元素上添加class="wow"以及data-wow-*属性。data-wow-*属性可以用来设置动画的延迟时间、持续时间、动画类型等。

例如：

<h1 class="wow fadeInDown" data-wow-delay=".5s" data-wow-duration="2s">Hello, World!</h1>

示例一：背景随滚动缩放

可以通过以下步骤实现背景随滚动缩放的效果：

1. 在HTML中创建一个包含背景图的div，并设置background-size: cover。

<div class="bg">
  <!-- 这里放置页面其他内容 -->
</div>

<style>
  .bg {
    background: url("bg.jpg") center no-repeat;
    background-size: cover;
  }
</style>

1. 使用CSS3的scale()函数，设置背景图的缩放比例，并结合transform-origin属性，设置缩放基准点。

.bg {
  transform-origin: center center;
}

.bg.wow.zoomIn {
  transform: scale(1.5);
}

1. 在JavaScript中使用wow.js，为div添加动画效果。

new WOW({
  offset: 200,
  mobile: false
}).init();

$('.bg').addClass('wow zoomIn');

示例二：滚动时左右摇晃的图片

可以通过以下步骤实现滚动时左右摇晃的图片效果：

1. 在HTML中创建一个包含图片的div。

<div class="img-container wow slideInLeft">
  <img src="img.jpg" alt="Image">
</div>

1. 使用CSS的translateX()函数实现左右摇晃的效果。

.img-container {
  position: relative;
}

.img-container.wow.swing img {
  transform: translateX(5px) rotate(0deg);
}

.img-container.wow.swing.wow-iteration-2 img {
  transform: translateX(-5px) rotate(0deg);
}

1. 在JavaScript中使用wow.js，为div添加动画效果。

new WOW({
  offset: 200,
  mobile: false
}).init();

$('.img-container').addClass('wow swing');

参考链接

1. wow.js官方文档
2. animate.css官方文档
3. A Guide to CSS Animation Libraries: A Hands-on Comparison