html5+css3滚动触发炫酷动画
下面可以简单看下代码
<!-- web开发 -->
<!-- www.webkfa.com -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>珠海——风暴</title>
<link href="http://wx.qi-cloud.com/uploads/i/ioocfo1400776790/a/1/0/5/5568620bd5d0d.jpg" rel="icon" type="imgs/gif" size="16*16">
<link rel="stylesheet" href="animate.css">
<link rel="stylesheet" href="magic.css">
<style>
@font-face:{
font-family:'方正粗活意简体';
url:(font/chyjt.ttf);
}
@font-face:{
font-family:'方正细倩简体';
url:(font/xqjt.ttf);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-touch-call-out:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
text-decoration:none;
list-style:none;
}
.box{
width:100%;
height:3200px;
position: absolute;
background-color:rgb(223,221,227);
overflow: hidden;
}
.s1{
width:100%;
height:500px;
background-color:#f19ec2;
position: relative;
padding:50px 0;
}
.title_box{
width:150px;
height:150px;
background-color:rgb(85,85,85);
border-radius:50%;;
margin:0 auto;
opacity:0;
transform:scale(0.1);
-webkit-transform:scale(0.1);
}
.title_box h2{
width:100%;
height:150px;
line-height: 150px;
color:white;
text-align: center;
}
.title_box~p{
font-size:20px;
font-family:'方正细倩简体';
color:white;
width:400px;
line-height:30px;
margin: 0 auto;
margin-top:50px;
font-weight:bold;
}
.s2{
width:100%;
height:800px;
background-image:url(imgs/background.jpg);
background-repeat: repeat-x;
background-size:100% auto;
padding-top:80px;
position: relative;
}
.s2 img{
display:block;
margin:0 100px;
}
.txt_container{
position: absolute;
right:200px;
width:300px;
height:auto;
top:100px;
}
.txt_container p{
height:60px;
line-height:60px;
color:white;
font-family:'方正粗活意简体';
font-size:40px;
color:rgb(56,66,84);
}
.s3{
width:100%;
height:600px;
background-color: rgb(246,246,246);
position: relative;
}
.img_wrapper{
width:560px;
height:300px;
position: absolute;
}
.img_wrapper img{
width:80%;
}
.img_wrapper:nth-child(1){
right:100px;
top:50px;
}
.img_wrapper:nth-child(2){
right:250px;
top:200px;
}
.img_wrapper:nth-child(3){
right:400px;
top:350px;
}
.mes_box{
width:300px;
height:300px;
position: absolute;
top:150px;
left:150px;
}
.mes_title{
width:100%;
height:60px;
line-height: 60px;
color:hotpink;
font-size:40px;
text-align: center;
font-family:'方正细倩简体';
}
.line{
width:100%;
margin-top:15px;
height:2px;
background-color:rgb(49,55,67);
}
.message{
margin-top:15px;
font-size: 20px;
color:lightslategrey;
font-family:'方正细倩简体';
}
.s4{
width:100%;
height:600px;
background-image:url(imgs/background.jpg);
background-size:100% auto;
position: relative;
overflow: hidden;
background-position: left bottom;
background-repeat: repeat-x;
}
.s4 img{
width:500px;
position: absolute;
bottom:-30px;
left:150px;
}
.s5{
width:100%;
height:700px;
background-color: rgb(40, 47, 44);
position: relative;
}
.s5 img{
width:800px;
position: absolute;
left:50%;
margin-left:-400px;
top:150px;
}
/*动画处理*/
body{
animation:html_page 600ms ease-in-out;
-webkit-animation:html_page 600ms ease-in-out;
-moz-animation:html_page 600ms ease-in-out;
-ms-animation:html_page 600ms ease-in-out;
-o-animation:html_page 600ms ease-in-out;
}
@-webkit-keyframes html_page{
0% {-webkit-transform-origin: 50% 50%;-webkit-transform: rotate3d(0, 1, 0, 720deg) rotateZ(45deg) scale(0);}
100% {-webkit-transform: rotate3d(0, 1, 0, 0) rotateZ(0) scale(1);}
}
@-moz-keyframes html_page{
0% {-moz-transform-origin: 50% 50%;-moz-transform: rotate3d(0, 1, 0, 720deg) rotateZ(45deg) scale(0);}
100% {-moz-transform: rotate3d(0, 1, 0, 0) rotateZ(0) scale(1);}
}
@-ms-keyframes html_page{
0% {-ms-transform-origin: 50% 50%;-ms-transform: rotate3d(0, 1, 0, 720deg) rotateZ(45deg) scale(0);}
100% {-ms-transform: rotate3d(0, 1, 0, 0) rotateZ(0) scale(1);}
}
@keyframes html_page{
0% {transform-origin: 50% 50%;transform: rotate3d(0, 1, 0, 720deg) rotateZ(45deg) scale(0);}
100% {transform: rotate3d(0, 1, 0, 0) rotateZ(0) scale(1);}
}
.title_box_flash{
animation:scaleBig 0.3s .6s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
-webkit-animation:scaleBig 0.3s .6s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
-moz-animation:scaleBig 0.3s .6s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
-ms-animation:scaleBig 0.3s .6s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
}
@keyframes scaleBig{
from{
transform:scale(0.1);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}
@-webkit-keyframes scaleBig{
from{
-webkit-transform:scale(0.1);
opacity:0;
}
to{
-webkit-transform:scale(1);
opacity:1;
}
}
@-moz-keyframes scaleBig{
from{
-moz-transform:scale(0.1);
opacity:0;
}
to{
-moz-transform:scale(1);
opacity:1;
}
}
.title_box h2{
-webkit-animate-delay:3s;
animate-delay:3s;
-moz-animate-delay:3s;
-o-animate-delay:3s;
}
.title_box~p{
animation:fadeInUp 0.3s 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
-webkit-animation:fadeInUp 0.3s 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
-moz-animation:fadeInUp 0.3s 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
-ms-animation:fadeInUp 0.3s 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
opacity: 0;
}
.txt_container p{
opacity:0;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
-ms-animation-duration:0.3s;
}
.txt_container p:nth-child(1){
-webkit-animation-delay:0.1s;
animation-delay:0.1s;
-moz-animation-delay:0.1s;
-ms-animation-delay:0.1s;
-o-animation-delay:0.1s;
}
.txt_container p:nth-child(2){
-webkit-animation-delay:0.2s;
animation-delay:0.2s;
-moz-animation-delay:0.2s;
-ms-animation-delay:0.2s;
-o-animation-delay:0.2s;
}
.txt_container p:nth-child(3){
-webkit-animation-delay:0.3s;
animation-delay:0.3s;
-moz-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
}
.txt_container p:nth-child(4){
-webkit-animation-delay:0.4s;
animation-delay:0.4s;
-moz-animation-delay:0.4s;
-ms-animation-delay:0.4s;
-o-animation-delay:0.4s;
}
.txt_container p:nth-child(5){
-webkit-animation-delay:0.5s;
animation-delay:0.5s;
-moz-animation-delay:0.5s;
-ms-animation-delay:0.5s;
-o-animation-delay:0.5s;
}
.pic1,.pic2,.pic3,.img_wrapper img{
opacity:0;
}
.img_wrapper:nth-child(1) img{
-webkit-animation-delay:0.1s;
animation-delay:0.1s;
-moz-animation-delay:0.1s;
-ms-animation-delay:0.1s;
-o-animation-delay:0.1s;
}
.img_wrapper:nth-child(2) img{
-webkit-animation-delay:0.2s;
animation-delay:0.2s;
-moz-animation-delay:0.2s;
-ms-animation-delay:0.2s;
-o-animation-delay:0.2s;
}
.img_wrapper:nth-child(3) img{
-webkit-animation-delay:0.3s;
animation-delay:0.3s;
-moz-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
}
.line{
-webkit-animation-timing-function:cubic-bezier(.22,.92,.05,.99);
-moz-animation-timing-function:cubic-bezier(.22,.92,.05,.99);
-ms-animation-timing-function:cubic-bezier(.22,.92,.05,.99);
-o-animation-timing-function:cubic-bezier(.22,.92,.05,.99);
-webkit-animation-delay:0.6s;
animation-delay:0.6s;
-moz-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
}
.message{
-webkit-animation-delay:1s;
animation-delay:1s;
-moz-animation-delay:1s;
-ms-animation-delay:1s;
-o-animation-delay:1s;
}
.mes_title,.line,.message{
opacity:0;
}
</style>
</head>
<body>
<div class="box">
<section class="s1">
<div class="title_box title_box_flash">
<h2 class="magictime vanishIn">HTML5</h2>
</div>
<p >Do you remember the things we used to say?I feel so nervous when I think of yesterday...</p>
</section>
<section class="s2">
<img class="pic1" src="imgs/mockup_1.png" alt="">
<div class="txt_container">
<p>animation</p>
<p>transition</p>
<p>transform</p>
<p>transparent</p>
<p>translate</p>
</div>
</section>
<section class="s3">
<div class="img_wrapper">
<img src="imgs/pantone_1.png" alt="">
</div>
<div class="img_wrapper">
<img src="imgs/pantone_2.png" alt="">
</div>
<div class="img_wrapper">
<img src="imgs/pantone_3.png" alt="">
</div>
<div class="mes_box">
<div class="mes_title">WEBAPP</div>
<div class="line"></div>
<div class="message">
Simple and Clean Shapes and Elements<br/>
for a Very Quick and Easy Use of this WebApp.
</div>
</div>
</section>
<section class="s4">
<img class="pic2" src="imgs/ui_kit.png" />
</section>
<section class="s5">
<img class="pic3" src="imgs/mockup_3.png" alt="">
</section>
</div>
<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('pic1')<300){
getDom('pic1').classList.add('animated');
getDom('pic1').classList.add('fadeInLeft');
}
if(getTop('txt_container')<320){
for(var i=0;i<getDom('txt_container').children.length;i++)
{
getDom('txt_container').children[i].classList.add('animated');
getDom('txt_container').children[i].classList.add('fadeInRight');
}
}
/*第三页动画的触发*/
if(getTop('img_wrapper')<400){
for(var i=0;i<document.getElementsByClassName('img_wrapper').length;i++)
{
document.getElementsByClassName('img_wrapper')[i].children[0].classList.add('magictime');
document.getElementsByClassName('img_wrapper')[i].children[0].classList.add('vanishIn');
}
getDom('mes_title').classList.add('animated');
getDom('mes_title').classList.add('rollIn');
getDom('line').classList.add('animated');
getDom('line').classList.add('fadeInLeft');
getDom('message').classList.add('animated');
getDom('message').classList.add('fadeInUp');
}
/*第四页动画的触发*/
if(getTop('pic2')<320){
getDom('pic2').classList.add('animated');
getDom('pic2').classList.add('fadeInUp');
}
/*第五页的动画*/
if(getTop('pic3')<320){
getDom('pic3').classList.add('animated');
getDom('pic3').classList.add('zoomIn');
getDom('pic3').style.opacity=1;
}
},false)
</script>
</body>
</html>
相关文章
最新发布
阅读排行
热门文章
猜你喜欢