index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物车宣传页</title>
<link rel="stylesheet" href="css/jquery.fullpage.css">
<link rel="stylesheet" href="css/index.css">
<style>
/* .section:first-child{
background-color: brown;
}
.section:nth-child(2){
background-color: cadetblue;
}
.section:nth-child(3){
background-color: coral;
} */
</style>
</head>
<body>
<!-- 公用元素 -->
<a href="#" class="go"><img src="images/00-go.png" alt=""></a>
<a href="#" class="more"><img src="images/00-more.png" alt=""></a>
<!-- 整体容器 -->
<div class="container">
<!-- 每一个切换页面、背景 -->
<div class="section screen01">
<!-- 沙发、商品列表、横幅 -->
<!-- 如果是大屏幕,如果原样式基本top定位,那么在大屏下会脱离显示区域,如果需要固定在一块区域内,则可以用一个固定大小的容器来装内容 -->
<div class="content">
<div class="goods"><img src="images/01-goods.png" alt=""></div>
<div class="sofa"><img src="images/01-sofa.png" alt=""></div>
<div class="fly"><img src="images/01-fly.png" alt=""></div>
</div>
</div>
<!-- 第二屏 动画特点:完全进入当前屏之后才开始执行动画 -->
<!-- 1.什么时候完全进入 -->
<!-- 2.动画怎么执行--怎么做动画 给大容器一个类 在这个类中追加动画 -->
<div class="section screen02">
<div class="content">
<!-- 商品列表 -->
<div class="goods"><img src="images/02-goods.png" alt=""></div>
<!-- 沙发 -->
<div class="sofa"><img src="images/02-sofa.png" alt=""></div>
<!-- 输入框 搜索框 关键字 -->
<div class="input">
<img src="images/02-search.png" alt="" class="search">
<img src="images/02-key.png" alt="" class="keyword">
</div>
<!-- 文字 -->
<div class="text">
<img src="images/02-text1.png" alt="" class="text1">
<img src="images/02-text2.png" alt="" class="text2">
</div>
</div>
</div>
<!-- active fullpage 内置类名 默认显示当前页即可使用active -->
<div class="section screen03">
<div class="content">
<div class="sofa"><img src="images/02-sofa.png" alt=""></div>
<div class="change">
<img src="images/03-change01.gif" alt="">
<img src="images/03-change02.gif" alt="">
</div>
<div class="cart">
<img src="images/03-cart01.gif" alt="">
<img src="images/03-cart02.gif" alt="">
</div>
</div>
</div>
<div class="section screen04">
<div class="content">
<!-- 白云 -->
<div class="cloud"><img src="images/04-cloud.png" alt=""></div>
<!-- 文字 -->
<div class="text">
<img src="images/04-text01.png" alt="">
<img src="images/04-text02.png" alt="">
</div>
<!-- 购物车-->
<div class="cart">
<img src="images/04-cart.png" alt="">
</div>
<!-- 沙发 -->
<div class="sofa"><img src="images/02-sofa.png" alt=""></div>
<!-- 收货地址 -->
<div class="address">
<img src="images/04-address01.png" alt="">
<img src="images/04-address02.png" alt="">
</div>
</div>
</div>
<div class="section screen05">
<div class="content">
<!-- 文字 -->
<div class="text"><img src="images/05-text.png" alt=""></div>
<!-- 沙发 -->
<div class="sofa"><img src="images/02-sofa.png" alt=""></div>
<!-- 银行卡 -->
<div class="card">
<img src="images/05-order.png" alt="" class="orderImg">
<img src="images/05-card.png" alt="" class="cardImg">
</div>
<!-- 点鼠标 -->
<div class="mouse">
<img src="images/05-mouse01.png" alt="" class="m1">
<img src="images/05-mouse02.png" alt="" class="m2">
<img src="images/05-hand.png" alt="" class="hand">
</div>
</div>
</div>
<div class="section screen06">
<div class="content">
<!-- 白云 -->
<div class="cloud">
<img src="images/06-cloud01.png" alt="">
<img src="images/06-cloud02.png" alt="">
</div>
<!-- 文字 -->
<div class="text">
<img src="images/06-text01.png" alt="">
<img src="images/06-text02.png" alt="">
</div>
<!-- 盒子 -->
<div class="box"><img src="images/06-box.png" alt=""></div>
<!-- 发货 -->
<div class="car">
<img class="carImg" src="images/06-car.png" alt="">
<img class="buyer" src="images/06-buyer.png" alt="">
<img class="address" src="images/06-address.png" alt="">
<img class="worker" src="images/06-worker.png" alt="">
<img class="say" src="images/06-say.png" alt="">
</div>
<!-- 收货人 -->
<div class="person">
<img class="personImg" src="images/06-person.png" alt="">
<img class="door" src="images/06-door.png" alt="">
</div>
</div>
</div>
<div class="section screen07">
<div class="content">
<div class="star">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
<img src="images/07-star.png" alt="">
</div>
<div class="text">
<img src="images/07-text.png" alt="">
</div>
</div>
</div>
<div class="section screen08">
<div class="content">
<div class="btn">
<img src="images/08-btn01.png" alt="">
<img src="images/08-btn02.gif" alt="">
</div>
<div class="again">
<img src="images/08-again.png" alt="">
</div>
<div class="hands">
<img src="images/08-hand.png" alt="">
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fullpage.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.css:
/* 公共元素样式 */
.go{
width: 100px;
height: 100px;
border-radius: 50%;
top: 40px;
right: 40px;
position: fixed;
z-index: 1001;
}
.more{
position: fixed;
right: 60px;
bottom: 80px;
z-index: 10001;
animation: more01 0.3s linear infinite alternate;
}
/* 布局:定位 动画:位移 */
/* 第一屏样式 */
.screen01{
background: url("../images/01-bg.png") no-repeat center bottom;
}
.content{
width: 900px;
height: 600px;
position: absolute;
left: 50%;
margin-left: -450px;
bottom: 0;
/* background-color:rgba(0, 0, 0, .1); */
}
.screen01 .goods{
text-align: center;
margin-top: 200px;
}
.screen01 .sofa{
position: absolute;
left: 230px;
top: 150px;
animation: sofa01 0.8s linear infinite alternate;
}
.screen01 .fly{
position: absolute;
top: 20px;
right: -50px;
animation: fly01 1s linear infinite alternate;/*匀速 无穷次 逆播放 */
}
/* 第一屏动画 */
/* 01.声明动画序列 */
@keyframes fly01{
from{ /*等同于0% */
transform: translateY(-30px);
}
to{ /*等同于100% */
transform: translateY(30px);
}
}
@keyframes sofa01{
from{ /*等同于0% */
transform: translateY(-20px);
}
to{ /*等同于100% */
transform: translateY(20px);
}
}
@keyframes more01{
from{ /*等同于0% */
transform: translateY(-10px);
}
to{ /*等同于100% */
transform: translateY(10px);
}
}
/* 第二屏样式 */
.screen02{
background: url("../images/02-bg.png") no-repeat center bottom;
}
.screen02 .goods{
position: absolute;
left: 50%;
margin-left: -220px;
top: 170px;
transform-origin: right bottom;
transform: scale(0);
}
.screen02 .sofa{
position: absolute;
left: 290px;
top: 132px;
transform: scale(0.5);
opacity: 0;
z-index: 1001;
}
.screen02 .input{
position: absolute;
right: 180px;
top: 120px;
/* transform: scale(0.7); */
transform-origin: right top;
opacity: 0;
}
/* .screen02 .search{} */
.screen02 .keyword{
position: absolute;
left: 100px;
top: 5px;
opacity: 0;
}
.screen02 .text{
text-align: center;
}
/* .screen02 .text1{} */
.screen02 .text2{
position: absolute;
opacity: 0;
}
/* 第二屏的动画 */
.screen02.now .goods{
transform: scale(1);
transition: transform 1s linear 2s;
}
.screen02.now .input{
/* 动画结束时停留在最后一个状态 forwards */
animation: input02 3s linear forwards;
}
.screen02.now .keyword{
opacity: 1;
transition: opacity 1s linear 1s;
}
.screen02.now .text1{
position: absolute;
opacity: 0;
/* transition: opacity 1s linear; */
}
.screen02.now .text2{
position: static;
opacity: 1;
transition: opacity 1s linear;
}
.screen02.leaved .sofa{
animation: sofa02 1s linear;
}
/* 动画声明序列 */
@keyframes input02{
/* 1.在最右侧 */
/* 2.在电脑屏幕中间 */
/* 3.停留在电脑屏幕中间--给关键字显示的动画时间 */
/* 4.移到右上角 */
/* 1-2 2-3 3-4 需要4个动画节点 */
0%{
transform: translate(1200px,130px);
opacity: 1;
}
33.33%{
transform: translate(-160px,130px);
}
67%{
transform: translate(-160px,130px);
}
100%{
transform: scale(0.7);
opacity: 1;
}
}
@keyframes sofa02{
from{
opacity: 1;
}
to{
transform: translate(-75px,1020px);
opacity: 1;
}
}
/* 第三屏的样式 */
.screen03{
background: url("../images/03-bg.png") no-repeat center bottom;
}
.screen03 .sofa{
position: absolute;
top: 175px;
left: 215px;
display: none;
}
.screen03 .change img:last-child{
position: absolute;
opacity: 0;
}
.screen03 .change{
position: absolute;
left: 490px;
top: 300px;
}
.screen03 .change img:first-child{
position: absolute;
}
.screen03 .cart img:last-child{
position: absolute;
opacity: 0;
}
.screen03 .cart{
position: absolute;
left: 490px;
top: 440px;
}
.screen03 .cart img:first-child{
position: absolute;
}
/* 第二页进入第三页时的样式转换及动画效果 */
.screen03.now .sofa{
display: block;
z-index: 10001;
}
.screen03.now .change img:last-child{
opacity:1;
transition: all 1s linear;
}
.screen03.now .change img:first-child{
opacity: 0;
}
.screen03.now .cart img:last-child{
opacity: 1;
transition: all 1s linear;
}
.screen03.now .cart img:first-child{
opacity: 0;
}
/* 第三屏进入第四屏的动画效果 */
.screen03.leaved .sofa{
/* transform: translate(200px,990px) rotate(45deg); */
/* transition: all 1s linear; */
animation: sofa03 1s linear;
}
@keyframes sofa03{
from{
}
to{
transform: translate(190px,970px) rotate(45deg);
}
}
/* 第四屏样式 */
.screen04{
background: url(../images/04-bg.png) no-repeat center bottom;
}
.screen04 .cloud{
position: absolute;
top: -50px;
left: -400px;
animation: cloud04 20s linear infinite alternate;
}
.screen04 .text{
text-align: center;
margin-top: 120px;
}
.screen04 .text img:last-child{
position: absolute;
opacity: 0;
}
.screen04 .text.show img:first-child{
position: absolute;
opacity: 0;
}
.screen04 .text.show img:last-child{
position: static;
opacity: 1;
transition: all 1s linear;
}
.screen04 .cart{
position: relative;
text-align: center;
margin-top: 50px;
z-index: 1;
}
.screen04 .sofa{
position: absolute;
top: 190px;
left: 400px;
transform: rotate(45deg);
opacity: 0;
}
.screen04 .address{
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 100px;
width: 283px;
display: none;
}
.screen04 .address img:last-child{
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
display: none;
}
.screen04.now .cart{
transform: translateX(1200px);
transition: transform 3s linear;
}
.screen04.now .sofa{
opacity: 1;
transform: translateX(1200px);
transition: transform 3s linear;
}
/* 动画结束监听 */
/* 1.css 通过掐时间 */
/* 2.js 监听动画结束事件 transitionend animationend */
/* jquery设置动画 $(选择器).animate(property,duration,speed,callback) */
/* 第四屏的动画 */
@keyframes cloud04{
from{
}
to{
transform: translateX(1000px);
}
}
/* 第五屏的样式 */
.screen05{
background: url(../images/05-bg.png);
}
.screen05 .content{
height: 100%;
}
.screen05 .text{
position: absolute;
left: 0;
bottom: 550px;
}
.screen05 .sofa{
position: absolute;
/* top: 340px; */
bottom: 150px;
left: 120px;
transform: rotate(30deg);
opacity: 0;
z-index: 1001;
}
.screen05 .card{
position: absolute;
left: 0;
/* top: 130px; */
bottom: 240px;
}
.screen05 .cardImg{
position: relative;
z-index: 1002;
}
.screen05 .orderImg{
position: absolute;
left: 120px;
top: -80px;
transform: translateY(100px);
}
.screen05 .mouse{
position: absolute;
right: 0;
top: 0;
width: 400px;
height: 100%;
overflow: hidden;
}
.screen05 .m1, .screen05 .m2{
position: absolute;
left: 150px;
bottom: 265px;
/* top: -415px; */
}
.screen05 .m2{
opacity: 0;
}
.screen05 .hand{
position: absolute;
left: 130px;
/* top: 260px; */
bottom: 40px;
transform: translateY(400px);
}
/* 第五屏动画 */
.screen05.now .hand{
transform: none;
transition: all 1s linear;
}
.screen05.now .m2{
opacity: 1;
transition: all 0.2s linear 1s;
}
.screen05.now .sofa{
animation: sofa05 2s linear 1.2s forwards;
}
.screen05.now .orderImg{
transform: none;
transition: all 1s linear 2.2s;
}
@keyframes sofa05{
0%{
transform: translateY(-1000px) rotate(30deg);
opacity: 1;
}
50%{
transform: translateY(-100px) rotate(30deg);
}
100%{
transform: rotate(30deg);
opacity: 1;
}
}
/* 第五屏离开时的沙发动画 */
.screen05.leaved .sofa{
animation: sofa05-06 1s linear;
}
@keyframes sofa05-06{
from{
transform: rotate(30deg);
opacity: 1;
}
to{
transform: translateY(800px) scale(0.2) rotate(30deg);
opacity: 1;
}
}
/* 第六屏样式 */
.screen06{
width: 100%;
height: 100%;
background: url(../images/06-bg.png) no-repeat 20% bottom;
/* 背景图的定位百分比-- 例如25%--是基于盒子的宽度1000-图片显示的大小800 ---即left:(1000-800)*25%=======left 50px
如果盒子1000,图片显示宽度也是1000 那么无论百分比是多少,都是left 0 即默认的left */
}
.screen06.now{
background: url(../images/06-bg.png) no-repeat 100% bottom;
transition: all 1s linear 1s;
}
.screen06 .cloud{
position: absolute;
top: -50px;
left: 0;
}
.screen06 .cloud img:first-child{
/* position: absolute; */
animation: cloud06 40s linear infinite alternate;
}
.screen06 .cloud img:last-child{
position: absolute;
left: 0;
top: 0;
animation: cloud06 20s linear infinite alternate;
}
.screen06 .text{
position: absolute;
top: 80px;
left: 130px;
}
.screen06 .text img:last-child{
position: absolute;
opacity: 0;
}
.screen06 .box{
position: absolute;
top: 150px;
left: 165px;
z-index: 1002;
}
.screen06 .box.show{
animation: box06 2s linear forwards;
}
/* 第六屏动画 */
@keyframes cloud06{
from{
}
to{
transform: translateX(1000px);
}
}
@keyframes box06{
0%{
transform: translateX(-900px);
}
50%{
transform: none;
}
100%{
transform: translateY(320px) scale(0.3);
}
}
.screen06 .car{
position: absolute;
left: 160px;
bottom: 0;
width: 221px;
height: 122px;
}
.screen06 .car img{
position: absolute;
opacity: 0;
}
.screen06 .car .carImg{
position: relative;
left: 0;
bottom: 0;
opacity: 1;
z-index: 1003;
}
.screen06.now .car .buyer{
right: 0;
top: -60px;
opacity: 1;
transition: all 0.25s linear 1.25s;
}
.screen06.now .car .address{
right: 0;
top: -60px;
opacity: 1;
transition: all 0.25s linear 1.75s;
}
.screen06.now .car .worker{
left: 0;
bottom: 0;
z-index: 1004;
transform-origin: left bottom;
animation: worker06 2.1s linear 2s forwards;
/* opacity: 1; */
}
@keyframes worker06{
0%{
opacity: 1;
transform: scale(0);
}
33.33%{
transform: scale(1);
}
67%{
transform: translateY(-100px);
}
100%{
transform: translateY(-100px) translateX(100px);
opacity: 1;
}
}
.screen06.now .say{
left: 240px;
top: -400px;
opacity: 1;
transition: all 1s linear 4.1s;
}
.screen06 .person{
position: absolute;
right: -226px;
bottom: 116px;
width: 106px;
height: 150px;
}
.screen06 .person img{
opacity: 0;
position: absolute;
}
.screen06.now .person .door{
opacity: 1;
transition: all 0.2s linear 5.1s;
}
.screen06.now .person .personImg{
bottom: 0;
right: 0;
transform-origin: right bottom;
z-index: 1005;
animation: personImg06 1.6s linear 5.3s forwards;
}
@keyframes personImg06{
0%{
opacity: 1;
transform: scale(0);
}
50%{
transform: scale(1);
}
100%{
transform: translateX(-400px);
opacity: 1;
}
}
.screen06.now .text img:first-child{
opacity: 0;
transition: all 0.1s linear 5.1s;
}
.screen06.now .text img:last-child{
position: absolute;
opacity: 1;
transition: all 1s linear 5.1s;
left: 0;
top: 0;
}
/* 第七屏的样式 */
.screen07{
/* width: 100%;
height: 100%; */
background: url(../images/07-bg.png) no-repeat left bottom;
}
.screen07 .star{
position: absolute;
left: 198px;
top: 142px;
}
.screen07 .star img{
float: left;
margin-right: 6px;
/* 用jquery的方式让星星一个接一个显示,因此这里可以用display: none ---方法1 */
/* display: none; */
/* 方法2.通过js控制星星显示动画的延迟时间 */
/* transition: all 0.3s linear; */
opacity: 0;
}
.screen07 .star.show img{
transition: all 0.3s linear;
}
.screen07 .text{
position: absolute;
left: 198px;
top: 185px;
transform-origin: left bottom;
opacity: 0;
transform: scale(0);
}
.screen07 .text.show{
animation: text07 0.5s linear 2s forwards;
}
@keyframes text07{
0%{
}
70%{
transform: scale(1.2);
opacity: 1;
}
100%{
transform: none;
opacity: 1;
}
}
/* 第八屏样式 */
.screen08{
background: url(../images/08-bg.png) left top;
}
.screen08 .btn{
width: 398px;
height: 160px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.screen08 .btn img:first-child{
position: absolute;
opacity: 1;
}
.screen08 .btn img:last-child{
position: absolute;
opacity: 0;
}
.screen08 .btn:hover img:last-child{
opacity: 1;
}
.screen08 .btn:hover img:first-child{
opacity: 0;
}
.screen08 .again{
position: absolute;
right: 0;
top: 80px;
}
.screen08 .hands{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100px;
}
index.js
$(function () {
// 1.设置每一页的背景颜色
// 2.设置屏幕内容的对齐方式,默认是垂直居中--改为顶部对齐
// 3.显示导航小圆点--指示器
// scrollingSpeed滚动速度,单位为毫秒 默认700
// 监听进入某一屏的时候 回调函数afterLoad
$(".container").fullpage({
// 通过配置设置每一页的背景颜色
sectionsColor:["#fadd67", "#84a2d4", "#ef674d", "#ffeedd", "#d04759", "#84d9ed", "#8ac060"],
verticalCentered:false,
navigation:true,
scrollingSpeed:1000,
afterLoad:function(link,index){
// 监听进入某一屏的事件
//index -序号-从1开始 当前屏的序号
console.log(index)
console.log(this)
$(".section").eq(index-1).addClass("now");
},
onLeave:function (index,nextindex,direction) {
//在页面滚动时的事件,direction表示方向
let currentSection=$(".section").eq(index-1);
if(index ==2 && nextindex==3){
//表示在准备离开第二页进入第三页时
currentSection.addClass("leaved");
}else if(index ==3 && nextindex==4){
//表示在准备离开第三页进入第四页时
currentSection.addClass("leaved");
}else if(index==5 && nextindex==6){
currentSection.removeClass("now").addClass("leaved");
$(".screen06 .box").addClass("show");
}else if(index==6 && nextindex==7){
//离开第六屏进入第七屏时
$(".screen07 .star img").each(function(i,item){
// console.log(item)
//星星一个接着一个显示 方法1
// $(this).delay(i*0.5*1000).fadeIn();
//方法2 控制星星显示的延迟时间
$(this).css("transition-delay",0.5*i+"s").css("opacity","1");
$(".screen07 .star").addClass("show");
$(".screen07 .text").addClass("show");
});
}
},
afterRender:function(){
//页面渲染完毕之后注册更多的点击事件
// $.fn.fullpage
$(".more").on("click",function(){
$.fn.fullpage.moveSectionDown();
});
//注册购物车动画执行结束的事件
$(".screen04 .cart").on("transitionend",function () {
// console.log("执行结束了")
//jQuery :last :first :visible :selected :checked ...
$(".screen04 .address").show().find("img:last").fadeIn();
$(".screen04 .text").addClass("show");
})
$(".screen08").on("mousemove",function(e){
$(this).find(".hands").css({
"left":e.clientX-460,
"top":e.clientY-330
})
}).find(".again").on("click",function(){
//清除所有的动画
/*2.1 加now 类*/
/*2.2 加leaved 类*/
/*2.3 加show 类*/
$('.now,.leaved,.show').removeClass('now').removeClass('leaved').removeClass('show');
/*2.4 加css属性 后果:加一个style属性*/
/*2.5 用jquery方法 show() fadeIn() 后果:加一个style属性*/
$('.content [style]').removeAttr('style');
//跳到第一页
$.fn.fullpage.moveTo(1);
})
}
});
});