Swiper中文论坛
标题:
animate动画滑动加载？？？
[打印本页]
作者:
Nola_jun
时间:
2016-8-3 18:14
标题:
animate动画滑动加载？？？
对于animate的应用，官网上面animate的介绍实例太少了，都有点懵圈了，不知道怎么使用才好，我写了一个demo，想要实现的效果是鼠标滑动的时候开始动画，但是动画不是一次性的全部加载，而是在距离屏幕可是区域一半的时候动画。接下去只要滑动就有动画，而不是动画一次性加载完毕。这要怎么破…………
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/swiper.animate.min.js"></script>
<style type="text/css">
body{
background: #09f;
}
p{
color: #fff;
font-size: 24px;
text-align: center;
}
img{
width: 50%;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">内容</p>
<img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.0s" swiper-animate-delay="0.3s">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0.3s">内容</p>
<img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.8s" swiper-animate-delay="0.3s">
</div>
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.3s">内容</p>
<img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.0s" swiper-animate-delay="0.3s">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0.3s">内容</p>
<img src="images/1.png" alt="" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.8s" swiper-animate-delay="0.3s">
</div>
</div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>
</body>
</html>
作者:
zhangjunjun
时间:
2016-8-4 14:53
帮顶----------------
欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)
Powered by Discuz! X3.2