网站动画效果-Swiper Animate & wow.js

小半 • 2023年2月10日上午9:45 • 前端开发 • 阅读 308

总结了开发网站时两种动画效果：

1.Swiper Animate(必须和swiper轮播图搭配使用)

Swiper Animate是Swiper中文网提供的用于在Swiper内快速制作CSS3动画效果的小插件，
适用于Swiper2.x、Swiper3.x、Swiper4.x和Swiper5.x

Swiper Animate使用方法：
①它依赖于swiper，所以先引入 swiper.animate.min.js 和 animate.min.css。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/swiper.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate.min.js"></script>
</head>
<body>
    ...
</body>
</html>

②在需要添加效果的元素上面增加类名 "ani" 即可

swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s

<div class="swiper-slide">
	<span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
		内容部分
	</span>
</div>

③可供选择的效果类名：点击查看。

2.wow.js（可以单独使用。放在swiper里会有冲突）

①wow.js依赖于animate.css，首先需要引入animate.min.css
②引入wow.js
③初始化wow
④在块状元素内添加相应的class类名 class="wow slideInLeft" 即可。

data-wow-duration=“2s” //动画持续时间
data-wow-offset=“10” //动画延迟时间
data-wow-iteration=“10”>//动画执行次数

以下是具体代码：

<!-- 1.引入wow依赖的animate.css -->
<link rel="stylesheet" type="text/css" href="css/animate.min.css">
<!-- 2.引入wow.js 文件 -->
<script src="js/wow.min.js"></script>
<!-- 3.初始化wow对象 -->
<script>
	new WOW().init();
</script>

<!-- 4.添加类名 即可使用 -->
<div class="wow slideInUp" data-wow-duration="3s" data-wow-delay="1s" data-wow-offset="1000" >
	动画演示WOW
</div>