鼠標滑動到當前頁面觸發動畫效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀏覽器滑動到當前界面觸發動畫</title>
<style>
* { margin:0; padding:0; }//reset css
.box { width:100%; height:1500px; background:gray; }
.two { width:100%; height:1500px; background:orange; }
.one { width:100%; height:1500px; background:pink; position:relative; }
.one h2 { width:100%; }
.one h2 img{
width:200px;
height:200px;
border-radius:50%;
margin:0 0 0 -100px;
left:50%;
top:100px;
display:block;
position:absolute;
}
.animated {
animation-duration:3s;
-webkit-animation-duration:3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.xuanzhuan { animation-name:xuanzhuan; -webkit-animation-name:xuanzhuan;}
@keyframes xuanzhuan {
0% { opacity:0; transform:rotate(120deg);-webkit-transform:rotate(120deg);}
50% { opacity:0.5; transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);}
100% { opacity:1; transform: scale(1,1);-webkit-transform:scale(1,1);}
}
@-webkit-keyframes xuanzhuan {
0% { opacity:0; transform:rotate(120deg);-webkit-transform:rotate(120deg);}
50% { opacity:0.5; transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);}
100% { opacity:1; transform:scale(1,1);-webkit-transform:scale(1,1);}
}
</style>
<script>
function getTop(clsName){
var obj = document.getElementsByClassName(clsName)[0];
return obj.getBoundingClientRect().top;
}
function getDom(clsName){
var obj=document.getElementsByClassName(clsName)[0];
return obj;
}
window.addEventListener(‘scroll‘,function(){
var scrollT=document.documentElement.scrollTop||document.body.scrollTop;
/*第二頁動畫的觸發*/
if(getTop(‘one‘)<100){
getDom(‘img01‘).classList.add(‘animated‘);//註意這個
getDom(‘img01‘).classList.add(‘xuanzhuan‘);
}
})
</script>
</head>
<body>
<div class="box">
<div class="two"></div>
<div class="one">
<h2><img class="img01" src="images/about.png" /></h2>
</div>
</div>
</body>
</html>
鼠標滑動到當前頁面觸發動畫效果