html动画执行,前端开发页面滚动执行CSS3动画

/p>

<

滚动页面执行动画

.box {

width: 100%;

height: 600px;

background-color: #87cefa;

border: 1px solid #d3d3d3;

margin-top: 2px;

}

h2 {

width: 200px;

height: 26px;

background-color: #ffdead;

line-height: 26px;

margin-top: 20px;

margin-left: 10px;

text-align: center;

color: #2f4f4f;

opacity: 0;

}

span {

display: block;

width: 35%;

height: 200px;

margin: 26px auto;

background-color: #ffa07a;

border: 1px solid transparent;

opacity: 0;

}

/* 执行动画的类 */

.font-animation {

animation: fontAnimation 1s;

-webkit-animation: fontAnimation 1s;

-moz-animation: fontAnimation 1s;

animation-fill-mode: forwards;

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

}

.box-animation {

animation: boxAnimation 2s;

-webkit-animation: boxAnimation 2s;

-moz-animation: boxAnimation 2s;

animation-fill-mode: forwards;

-webkit-animation-fill-mode: forwards;

-moz-animation-fill-mode: forwards;

}

/* 定义动画 */

@keyframes fontAnimation {

from {

margin-left: 10px;

opacity: 0;

}

to {

margin-left: 600px;

opacity: 1;

}

}

@keyframes boxAnimation {

0% {

height: 200px;

opacity: 0;

border-radius: 0;

}

50% {

height: 240px;

opacity: 0.4;

border-radius: 0;

}

100% {

height: 320px;

opacity: 1;

border-radius: 50%;

}

}

@-webkit-keyframes fontAnimation {

from {

margin-left: 10px;

opacity: 0;

}

to {

margin-left: 600px;

opacity: 1;

}

}

@-webkit-keyframes boxAnimation {

0% {

height: 200px;

opacity: 0;

border-radius: 0;

}

50% {

height: 240px;

opacity: 0.4;

border-radius: 0;

}

100% {

height: 320px;

opacity: 1;

border-radius: 50%;

}

}

@-moz-keyframes fontAnimation {

from {

margin-left: 10px;

opacity: 0;

}

to {

margin-left: 600px;

opacity: 1;

}

}

@-moz-keyframes boxAnimation {

0% {

height: 200px;

opacity: 0;

border-radius: 0;

}

50% {

height: 240px;

opacity: 0.4;

border-radius: 0;

}

100% {

height: 320px;

opacity: 1;

border-radius: 50%;

}

}

这里是第1页

这里是第2页

这里是第3页

这里是第4页

window.onload = function() {

var b1 = document.getElementsByTagName(‘span’)[0]

var b2 = document.getElementsByTagName(‘span’)[1]

var b3 = document.getElementsByTagName(‘span’)[2]

var b4 = document.getElementsByTagName(‘span’)[3]

var f1 = document.getElementsByClassName(‘f’)[0]

var f2 = document.getElementsByClassName(‘f’)[1]

var f3 = document.getElementsByClassName(‘f’)[2]

var f4 = document.getElementsByClassName(‘f’)[3]

control(

[b1, 0, ‘box-animation’, 0],

[b2, 0, ‘box-animation’, 1000],

[f1, 0, ‘font-animation’, 500],

[f2, 0, ‘font-animation’, 2000],

)

document.onscroll = function() {

control(

[b3, 500, ‘box-animation’, 0],

[f3, 500, ‘font-animation’, 1000],

)

control(

[b4, 1000, ‘box-animation’, 0],

[f4, 1000, ‘font-animation’, 1000],

)

}

}

/*参数：[元素，高度，类名，延时] 参数可以用数组的形式添加任意组*/

function control(arr) {

for (var a in arguments) {

if (arguments[a][1] == 0) {

setTimeout(

function(ele, name) {

ele.className = name

},

arguments[a][3],

arguments[a][0],

arguments[a][2],

)

} else {

if (

parseInt(document.body.scrollTop) >=

arguments[a][1] ||

parseInt(document.documentElement.scrollTop) >=

arguments[a][1]

) {

setTimeout(

function(ele, name) {

ele.className = name

},

arguments[a][3],

arguments[a][0],

arguments[a][2],

)

}

}

}

}