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

小跳不会Coding

已于 2023-08-01 13:37:45 修改

阅读量1.1k

点赞数 3

分类专栏：网站开发文章标签：动画 javascript css3

于 2022-05-17 18:05:24 首次发布

本文链接：https://blog.csdn.net/weixin_48596030/article/details/124823699

版权

网站开发专栏收录该内容

45 篇文章 4 订阅

订阅专栏

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

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>