<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>利用jquery制作滾動到指定位置觸發動畫</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.gs {
position: relative;
top: 100px;
font-weight:bold;">#099;
left: 150px;
width: 80px;
}
.xz {
animation: roate 2s;
animation-fill-mode: forwards;
animation-direction: alternate;
}
.gs {
float: left;
}
@keyframes roate {
from {
transform: rotate(0deg);
width: 100px;
height: 100px;
}
to {
transform: rotate(360deg);
width: 200px;
height: 200px;
}
}
.xs {
width: 50px;
float: left;
height: 30px;
font-weight:bold;">#F90;
position: fixed;
left: 700px;
top: 0px;
}
</style>
</head>
<body>
<script type="text/javascript">
/*var a,b,c;
a=$("#dh").offset().top;//元素相對於窗口的距離
b=$(window).scrollTop(); //監控窗口已滾動的距離;
c=$(document).height();//整個文檔的高度
d=$(window).height();//瀏覽器窗口的高度
element 標簽
cssname 動畫
offset 相對於窗口的距離
*/
function scrollnumber(element, cssname, offset) {
var a, b, c, d;
d = $(element).offset().top;
a = eval(d + offset);
b = $(window).scrollTop();
c = $(window).height();
if (b + c > a) {
$((element)).addClass((cssname));
}
}
function scrollfun() {
scrollnumber("#dh1", 'xz', 100);
scrollnumber("#dh2", 'xz', 100);
scrollnumber("#dh3", 'xz', 100);
scrollnumber("#dh4", 'xz', 100);
}
$(document).ready(function (e) {
scrollfun();
$(window).scroll(function () {
scrollfun();
});
});
</script>
<div style="height: 1000px;width: 100%"></div>
<div style="height: 1000px;width: 100%">
<div style="height:auto; font-weight:bold;">#999; width:auto; margin: 0 auto;">
<div class="com" style="height: auto;font-weight:bold;">darkgray;position: relative;">
<div id="dh1" class="gs">觸發動畫111</div>
<div id="dh2" class="gs">觸發動畫222</div>
<div id="dh3" class="gs">觸發動畫333</div>
<div id="dh4" class="gs">觸發動畫444</div>
</div>
</div>
</div>
</body>
</html>
利用jquery制作滾動到指定位置觸發動畫
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。