页面滚动--添加animation动画效果

最新推荐文章于 2023-07-04 22:28:59 发布

diaojunhan4740

最新推荐文章于 2023-07-04 22:28:59 发布

阅读量430

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/-zhuli/p/5633831.html

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>动画</title>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>



<link rel="stylesheet" type="text/css" href="animate.css"/>
<style>
*{padding: 0;margin: 0;list-style-type: none;}

/*页面滚动加载*/
.animation-box{width: 100%;clear: both;}
.animation-box ul{width: 100%;float: left;margin-bottom: 60px;}
.animation-box ul li{width: 25%;float: left;}
.animation-box ul li img{width: 100%;float: left;}
</style>
</head>
<body style="height: 1000px;">
<div class="animation-box ">
<ul >
<li><img class="bounce animated" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
</ul>

<ul >
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
</ul>

<ul >
<li><img class="revealOnScroll" data-animation="lightSpeedIn" data-timeout="800" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
</ul>

<ul>
<li><img class="revealOnScroll" data-animation="lightSpeedIn" data-timeout="400" src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInLeft" data-timeout="600" src="feng02.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInRight" data-timeout="800"src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="lightSpeedIn" data-timeout="1000" src="feng02.jpg"/></li>
</ul>

<ul>
<li><img class="revealOnScroll" data-animation="bounce" data-timeout="400" src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInLeft" data-timeout="400" src="feng02.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInRight" data-timeout="400"src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInTop" data-timeout="400" src="feng02.jpg"/></li>
</ul>
</div>

</body>

var $window = $(window);
win_height_padded = $window.height() * 1.1;
//isTouch = Modernizr.touch;

//if (isTouch) { $('.revealOnScroll').addClass('animated'); }

$window.on('scroll', revealOnScroll);

function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;

// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;

if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn bounceInLeft bounceInRight')
}
})

}

})

</script>
</html>

转载于:https://www.cnblogs.com/-zhuli/p/5633831.html

diaojunhan4740

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面滚动--添加animation动画效果

<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>动画</title> <script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></scrip...
复制链接

扫一扫