前端基础学习之h5c3-购物车宣传页动画小练习

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="data:images/00-go.png" alt=""></a><a href="#" class="more"><img src="data:images/00-more.png" alt=""></a><!-- 整体容器 --><div class="container"><!-- 每一个切换页面、背景 --><div class="section screen01"><!-- 沙发、商品列表、横幅 --><!-- 如果是大屏幕，如果原样式基本top定位，那么在大屏下会脱离显示区域，如果需要固定在一块区域内，则可以用一个固定大小的容器来装内容 --><div class="content"><div class="goods"><img src="data:images/01-goods.png" alt=""></div><div class="sofa"><img src="data:images/01-sofa.png" alt=""></div><div class="fly"><img src="data:images/01-fly.png" alt=""></div></div></div><!-- 第二屏 动画特点：完全进入当前屏之后才开始执行动画 --><!-- 1.什么时候完全进入 --><!-- 2.动画怎么执行--怎么做动画   给大容器一个类 在这个类中追加动画 --><div class="section screen02"><div class="content"><!-- 商品列表 --><div class="goods"><img src="data:images/02-goods.png" alt=""></div><!-- 沙发 --><div class="sofa"><img src="data:images/02-sofa.png" alt=""></div><!-- 输入框 搜索框 关键字 --><div class="input"><img src="data:images/02-search.png" alt="" class="search"><img src="data:images/02-key.png" alt="" class="keyword"></div><!-- 文字 --><div class="text"><img src="data:images/02-text1.png" alt="" class="text1"><img src="data: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="data:images/02-sofa.png" alt=""></div><div class="change"><img src="data:images/03-change01.gif" alt=""><img src="data:images/03-change02.gif" alt=""></div><div class="cart"><img src="data:images/03-cart01.gif" alt=""><img src="data:images/03-cart02.gif" alt=""></div></div></div><div class="section screen04"><div class="content"><!-- 白云 --><div class="cloud"><img src="data:images/04-cloud.png" alt=""></div><!-- 文字 --><div class="text"><img src="data:images/04-text01.png" alt=""><img src="data:images/04-text02.png" alt=""></div><!-- 购物车--><div class="cart"><img src="data:images/04-cart.png" alt=""></div><!-- 沙发 --><div class="sofa"><img src="data:images/02-sofa.png" alt=""></div><!-- 收货地址 --><div class="address"><img src="data:images/04-address01.png" alt=""><img src="data:images/04-address02.png" alt=""></div></div></div><div class="section screen05"><div class="content"><!-- 文字 --><div class="text"><img src="data:images/05-text.png" alt=""></div><!-- 沙发 --><div class="sofa"><img src="data:images/02-sofa.png" alt=""></div><!-- 银行卡 --><div class="card"><img src="data:images/05-order.png" alt="" class="orderImg"><img src="data:images/05-card.png" alt="" class="cardImg"></div><!-- 点鼠标 --><div class="mouse"><img src="data:images/05-mouse01.png" alt="" class="m1"><img src="data:images/05-mouse02.png" alt="" class="m2"><img src="data:images/05-hand.png" alt="" class="hand"></div></div></div><div class="section screen06"><div class="content"><!-- 白云 --><div class="cloud"><img src="data:images/06-cloud01.png" alt=""><img src="data:images/06-cloud02.png" alt=""></div><!-- 文字 --><div class="text"><img src="data:images/06-text01.png" alt=""><img src="data:images/06-text02.png" alt=""></div><!-- 盒子 --><div class="box"><img src="data:images/06-box.png" alt=""></div><!-- 发货 --><div class="car"><img class="carImg" src="data:images/06-car.png" alt=""><img class="buyer" src="data:images/06-buyer.png" alt=""><img class="address" src="data:images/06-address.png" alt=""><img class="worker" src="data:images/06-worker.png" alt=""><img class="say" src="data:images/06-say.png" alt=""></div><!-- 收货人 --><div class="person"><img class="personImg" src="data:images/06-person.png" alt=""><img class="door" src="data:images/06-door.png" alt=""></div></div></div><div class="section screen07"><div class="content"><div class="star"><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""><img src="data:images/07-star.png" alt=""></div><div class="text"><img src="data:images/07-text.png" alt=""></div></div></div><div class="section screen08"><div class="content"><div class="btn"><img src="data:images/08-btn01.png" alt=""><img src="data:images/08-btn02.gif" alt=""></div><div class="again"><img src="data:images/08-again.png" alt=""></div><div class="hands"><img src="data: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);})}});
});

前端基础学习之h5c3-购物车宣传页动画小练习相关推荐

iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
前端基础学习——JavaScript之BOM模型与DOM模型
前面还有JavaScript基础介绍,有兴趣的朋友可以前往查看前端基础学习--带你夯实JavaScript基础目录一. BOM模型 1.1 BOM模型与DOM模型示意图: 1.2 浏览器窗口中的B ...
前端基础学习html部分小结
前端基础学习html部分小结 1 了解知识 1.1 网页的组成 html(Hyper Text Markup Language)指的是超文本标记语言,可以加入图片.声音.动画.多媒体等内容.还可以从一 ...
前端基础学习——Vue框架-AJAX的使用
目录一. AJAX基础 1.1.AJAX简介 1.2.第三方数据接口 1.3.AJAX实例 1.4.AJAX的异步特性二. axios框架 2.1.get方式与post方式请求 2.2.axios ...
【安利】前端基础学习资源
最近在边用vue做一些项目/学校的比赛, 边在补一些之前图快而落下的基础知识. 安利一下在这过程中遇到不错的资源: https://yangbo5207.github.io/wutongluo/ 这波 ...
前端基础学习——带你全面掌握HTML语言
目录一. 认识HTML 1.1 HTML简介 1.2.常用主流浏览器 1.3.前端常用开发工具 1.4 HBuilder或HBuilderX的快捷输入 1.4.1 嵌套 > 1.4.2 并列 ...
框架中的左侧菜单关联右侧页面是如何实现的_前端基础学习：Vue2.0实现移动端外卖平台项目，参考旧版饿了么！...
主要依赖基于vue@2.0 使用vue-cli@2.0搭建项目框架使用vue-router@2.1进行页面路由切换使用vue-resource@1.0.1进行http请求获取数据 mock假数据 ...
npm 卸载_前端基础学习（一）--npm
****************************npm下载镜像********************** 淘宝 NPM 镜像参考引用:http://npm.taobao.org/ 当前 r ...
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
文章目录 HTML结构一.标签(标记.元素) 二.列表,表格,表单 1.列表 2.图片 3.超链接--实现不同页面的跳转 4.table表格 5.表单1 --收集用户信息给后端input CSS表现 ...

前端基础学习之h5c3-购物车宣传页动画小练习

前端基础学习之h5c3-购物车宣传页动画小练习相关推荐

最新文章

热门文章