版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_36818386/article/details/82530627
效果图:
CSS源码:
*
{
margin: 0px;
padding: 0px;
}
ul,li
{
list-style: none;
}
.box
{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.box2
{
width: 100%;
height: 500px;
background-color: darkred;
}
.box2 .inner
{
position: relative;
width: 1400px;
height: 500px;
background-color: darkred;
margin: 0 auto;
}
.box2 .inner h1
{
position: absolute;
top: 150px;
left: 200px;
color: aqua;
font-size: 70px;
}
.page2
{
width: 100%;
height: 800px;
background-color: darkgoldenrod;
}
.page2 .inner
{
width: 1400px;
height: 100%;
background-color: darkolivegreen;
margin: 0 auto;
}
.page2 .inner ul li
{
float: left;
width: 230px;
height: 350px;
background-color: aqua;
margin: 20px;
}
.page3
{
width: 100%;
height: 700px;
background-color: orange;
}
.page3 .inner
{
position: relative;
width: 1400px;
height: 100%;
background-color: wheat;
margin: 0 auto;
}
.page3 .inner .cur
{
position: absolute;
width: 240px;
height: 240px;
background-color: rebeccapurple;
left:640px;
top: 260px;
}
.page3 .inner li
{
float: left;
width: 150px;
height: 150px;
background-color: rebeccapurple;
margin: 30px;
}
.page3 .inner li:nth-child(2)
{
position: absolute;
left: 200px;
top: 500px;
}
.page3 .inner li:nth-child(3)
{
position: absolute;
left: 1000px;
top: 500px;
}
.page3 .inner li:nth-child(4)
{
position: absolute;
left: 1000px;
top: 200px;
}
.page3 .inner li:nth-child(5)
{
position: absolute;
left: 200px;
top: 200px;
}
.page3 .inner li:nth-child(6)
{
position: absolute;
left: 650px;
top: 80px;
}
.page3 .inner li:nth-child(7)
{
position: absolute;
left: 650px;
top: 510px;
}
.page4
{
position: relative;
width: 100%;
height: 600px;
background-color: darkolivegreen;
}
.page4 .inner
{
width: 1400px;
height: 100%;
background-color: darkred;
margin: 0 auto;
}
.page4 .inner li
{
float: left;
height: 500px;
width: 400px;
background-color: silver;
margin: 20px;
margin-top: 50px;
}
.page5
{
position: relative;
width: 100%;
height: 600px;
background-color: orange;
perspective: 1000px;
}
.page5 .inner
{
position: relative;
width: 1400px;
height: 100%;
background-color: chartreuse;
margin: 0 auto;
}
.page5 .inner .text
{
position: absolute;
font-size: 140px;
text-align: center;
top: 200px;
left: 250px;
}
.page5 .inner .text span
{
display: inline-block;
}
.page6
{
position: relative;
width: 100%;
height: 600px;
background-color: darkolivegreen;
perspective: 1000px;
}
.page6 .inner
{
position: relative;
width: 1400px;
height: 100%;
background-color: rebeccapurple;
margin: 0 auto;
}
.page6 .inner img
{
width: 300px;
height: 500px;
position: absolute;
left: 600px;
top: 100px;
}
HTML和jQ源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="CSS/style.css">
</head>
<body>
<div class="box">
<!--首页大盒子-->
<div class="box2">
<div class="inner">
<h1>jQ和H5C3制作的动态动画网页布局</h1>
</div>
</div>
<!--第二个盒子-->
<div class="page2 page">
<div class="inner">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--第三个盒子-->
<div class="page3 page">
<div class="inner">
<ul>
<li class="cur"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--第四个盒子-->
<div class="page4 page">
<div class="inner">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--第五个盒子-->
<div class="page5 page">
<div class="inner">
<div class="text">
<span>我</span>
<span>们</span>
<span>是</span>
<span>最</span>
<span>棒</span>
<span>的</span>
</div>
</div>
</div>
<!--第六个盒子-->
<div class="page6 page">
<div class="inner">
<img src="images/1.jpg" alt="">
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
//第一个动画
/*第一个动画的初始位置*/
function anim1()
{
$(".page2 .inner li").css({
"transform" : "translateX(-2000px)",
"opacity": 0
});
setTimeout(function ()
{
$(".page2 .inner li").each(function (i)
{
$(this).css({"transition":"all 3s ease " +i * 0.5+"s"});
})
/*第一个动画的结束位置*/
$(".page2 .inner li").css(
{
"transform" : "none",
"opacity": 1
});
},200);
}
//第二个动画
//大块初始位置
function anim2()
{
$(".page3 .cur").css({
"transform" : "scale(0) rotate(720deg)"
});
$(".page3 li").css({
"opacity" : 0
}
);
setTimeout(function () {
$(".page3 .cur").css({
"transition" : "all 3s ease 0s"
});
$(".page3 li").css({
"transition" : "all 4s ease 0s"
});
//大块最终位置
$(".page3 .cur").css({
"transform" : "none"
});
//小块最终位置
$(".page3 li").css({
"opacity" : 1
});
});
}
//第三个动画
//开始位置
function anim3()
{
$(".page4 ul li").eq(0).css({
"transform" : "translateX(-2000px)"
}
);
$(".page4 ul li").eq(1).css({
"transform" : "translateY(2000px)"
}
);
$(".page4 ul li").eq(2).css({
"transform" : "translateX(2000px)"
}
);
setTimeout(function () {
$(".page4 ul li").css({
"transition" : "all 3s ease 0s"
});
//结束位置
$(".page4 ul li").css({
"transform" : "none"
});
});
}
//第四个动画
function anim4()
{
$(".page5 .inner .text span").css({
"transform" : "translateZ(2000px)"
});
setTimeout(function () {
$(".page5 .inner .text span").each(function (i) {
$(this).css({
"transition" : "all 3s ease "+i * 0.3+"s"
});
});
$(".page5 .inner .text span").css({
"transform" : "none"
});
});
}
//第五个动画
function anim5()
{
$(".page6 .inner img").css({
"transform" : "translateX(500px) translateZ(200px) rotateX(360deg) rotateY(300deg)",
"opacity" : 0
});
setTimeout(function () {
$(".page6 .inner img").css({
"transition" : "all 2s ease 0s"
}
);
$(".page6 .inner img").css({
"transform" : "none",
"opacity" : 1
});
});
}
//将每个动画放到一个数组里面
var arrAnim = [, anim1, anim2, anim3, anim4, anim5];
var pageTop = []; //页面到顶部的数组
$(".page").each(function (i) {
pageTop.push($(this).offset().top);
});
var idx = 0;
//滚动事件
$(window).scroll(function () {
var h = $(window).scrollTop();
for(var i = 0; i < pageTop.length; i++)
{
if(h > pageTop[i] - 1200 && typeof arrAnim[i] == "function")
{
arrAnim[i]();
}
}
});
</script>
</body>
</html>