在別人的網站中，看到頁面滾動到某一位置時，該位置的元素經過各類炫酷的動畫展現出來。不知道他們是怎麼作的，我根據本身的理解作了一個demo。原理很簡單，用CSS3預先定義元素的動畫效果，先不要添加到元素上。監聽window.onscroll的事件，獲取頁面滾動的高度，當這個元素顯示出來時，動態添加該元素的動畫效果。（有兩種方法，一、經過style.cssText寫入樣式；二、經過className添加類）。話很少說，直接上代碼。css
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>動態CSS3動畫</title>
<style>
* {margin:0; border:0; padding:0;}
body {width:100%; height:2000px;}
#div1 {
position:relative;
top: 1000px;
display: flex;
overflow: hidden;
}
#div2 {
position:relative;
top: 1800px;
display: flex;
overflow: hidden;
}
#div1 .img,#div2 .img{
position: relative;
display: inline-block;
flex: 1;
height: 200px;
background-size: 100% 100%;
background-repeat: no-repeat;
overflow: hidden;
}
#div1 .img1{
background-image: url('img/sbg1.jpg');
/* 動畫名稱 動畫時長 動畫循環次數*/
/* animation: slideLeft 1s 1; */
}
#div1 .img2{
background-image: url('img/sbg2.jpg');
/* animation: slideBottom 1s 1; */
}
#div1 .img3{
background-image: url('img/sbg3.jpg');
/* animation: slideTop 1s 1; */
}
#div1 .img4{
background-image: url('img/sbg4.jpg');
/* animation: slideRight 1s 1; */
}
@keyframes slideRight{
from{
right: -200px;
}
to{
right: 0px;
}
}
@keyframes slideTop{
from{
top: -200px;
}
to{
top: 0px;
}
}
@keyframes slideBottom{
from{
bottom: -200px;
}
to{
bottom: 0px;
}
}
@keyframes slideLeft{
from{
left: -200px;
}
to{
left: 0px;
}
}
#div2 .img1{
background-image: url('img/sbg1.jpg');
/* 動畫名稱 動畫時長 動畫循環次數*/
/* animation: zoomIn 1s 1; */
}
#div2 .img2{
background-image: url('img/sbg2.jpg');
/* animation: zoomOut 1s 1; */
}
#div2 .img3{
background-image: url('img/sbg3.jpg');
/* animation: rotate 1s 1; */
}
#div2 .img4{
background-image: url('img/sbg4.jpg');
/* animation: rotate2 1s 1; */
}
@keyframes zoomIn{
from{
transform: scale(0.1);
}
to{
transform: none;
}
}
@keyframes zoomOut{
from{
transform: scale(2);
}
to{
transform: none;
}
}
@keyframes rotate{
from{
transform: rotate(360deg) scale(0.1);
}
to{
transform: none;
}
}
@keyframes rotate2{
from{
transform: rotate(-360deg) scale(2);
}
to{
transform: none;
}
}
.ani1{
animation: zoomIn 1s 1;
}
.ani2{
animation: zoomOut 1s 1;
}
.ani3{
animation: rotate 1s 1;
}
.ani4{
animation: rotate2 1s 1;
}
</style>
<script>
window.onload = function (){
//兩種方法：一、經過style.cssText寫入樣式；二、經過className添加類。
// document.getElementById("div1").style.cssText = "animation: slideLeft 1s 1; "
// document.getElementById("div1").className = "ani";
window.onscroll = function (){
var clienth = document.documentElement.clientHeight; //屏幕高度
var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //滾動條滾動高度
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
if (scrollt+clienth>=1000) {
div1.getElementsByClassName('img1')[0].style.cssText = 'animation: slideLeft 1s 1';
div1.getElementsByClassName('img2')[0].style.cssText = 'animation: slideBottom 1s 1';
div1.getElementsByClassName('img3')[0].style.cssText = 'animation: slideTop 1s 1';
div1.getElementsByClassName('img4')[0].style.cssText = 'animation: slideRight 1s 1';
}
console.log(scrollt+clienth)
if (scrollt+clienth>=2000) {
for (var i = 1; i <= 4; i++) {
div2.getElementsByClassName('img'+i)[0].className = 'img img'+i+' ani'+i;
}
}
}
}
</script>
</head>
<body>
<div id="div1">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
</div>
<div id="div2">
<div class="img img1"></div>
<div class="img img2"></div>
<div class="img img3"></div>
<div class="img img4"></div>
</div>
</body>
</html>
圖片資源就不上傳了，隨便找幾張圖片就行了。比較懶，沒有添加瀏覽器的私有前綴，自行添加。html