H5C3动画实例，通过基于jQuery的fullpage插件完成

要点：

1、素材是黑马程序员的，自己重写了下代码，主要是为了体会下h5c3。

2、环境 :

3、主要是加入了pullpage的插件特有的功能帮助开发，其中基于jQuery开发的插件，其定义的方法一般都是通过$.fn.插件名.方法来调用的。在pullpage中可以使用jQuery所有的方法，同时能跟pullpageAPI联合使用。其进入页面，离开页面，和页面渲染事件发生之后，提供了对应的回调方法，如afterLoad:function(){}可以写出清晰模块的代码。

4、在控制元素的显示和隐藏时，如果使用过渡transform，只能通过控制透明度opacity。而通过jQuery提供的方法可以改变对应元素的display属性来控制显示和隐藏。

5、注意，在两个原来并列层级的元素，在其中一个执行过渡时（最常见的是调整元素居中使用translateX(-50%)），会提高对应元素的层级，让其层级最大而显示出来，在很多动画执行时需要注意。另外如果元素在执行旋转后，在同一组的横纵坐标轴会发生改变。

6、最后重新执行全部动画时，就是将控制动画执行的信号属性，如本例中的leaved和into类名，还有内联样式style的改变，将其还原到改变之前的属性值。

效果：

html代码：

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="css/fullpage.css"><link rel="stylesheet" type="text/css" href="css/index.css"></head><body><a href="#" class="goto"><img src="data:image/00-go.png"></a><a href="javascript:;" class="more"><img src="data:image/00-more.png"></a><!-- 整个宣传页每个页面当中公共的部分，使用固定定位 --><div class="container"><!-- container设置使用fullpage的整体容器 --><div class="section section1"><!-- 设置第二个类名，是为了添加指定的背景 --><div class="content"><!-- 在第一屏中再定义一个容器，用来专门盛放沙发，列表，椅子等主体内容 --><div class="goods"><img src="data:image/01-goods.png"></div><div class="sofa"><img src="data:image/01-sofa.png"></div><div class="flag"><img src="data:image/01-fly.png"></div></div></div><div class="section section2"><div class="content"><!-- 盛放输入框，沙发等 --><div class="goods"><img src="data:image/02-goods.png"></div><div class="sofa"><img src="data:image/02-sofa.png"></div><div class="input"><img class="search" src="data:image/02-search.png"><!-- 搜索框 --><img class="key" src="data:image/02-key.png"><!-- 关键字 --></div><div class="text"><img class="text1" src="data:image/02-text1.png"><!-- 广告字做动画之前的图片文字 --><img class="text2" src="data:image/02-text2.png"><!-- 广告字做完之后的文字效果 --></div></div></div><div class="section section3"><div class="content"><div class="sofa"><img src="data:image/02-sofa.png"></div><!-- 下面也需要沙发，不能一直用第二屏的沙发进行切换 --><!-- 因为因为定位距离太长，并且如果不是第二屏执行动画会出错 --><div class="change"><img src="data:image/03-change01.gif"><img src="data:image/03-change02.gif"></div><div class="cart"><img src="data:image/03-cart01.gif"><img src="data:image/03-cart02.gif"></div></div></div><div class="section section4"><div class="content"><div class="cloud"><img src="data:image/04-cloud.png"></div><div class="text"><img src="data:image/04-text01.png"><img src="data:image/04-text02.png"></div><div class="cart"><img src="data:image/04-cart.png"></div><div class="sofa"><img src="data:image/02-sofa.png"></div><div class="address"><img src="data:image/04-address01.png"><img src="data:image/04-address02.png"></div></div></div><div class="section section5"><div class="content"><div class="text"><img src="data:image/05-text.png"></div><div class="sofa"><img src="data:image/02-sofa.png"></div><div class="card"><img src="data:image/05-card.png"><img src="data:image/05-order.png"></div><div class="mouse"><img src="data:image/05-mouse01.png"><img src="data:image/05-mouse02.png"><img src="data:image/05-hand.png"></div></div></div><div class="section section6"><div class="content"><div class="cloud"><img src="data:image/06-cloud01.png"><img src="data:image/06-cloud02.png"></div><div class="text"><img src="data:image/06-text01.png"><img src="data:image/06-text02.png"></div><div class="box"><img src="data:image/06-box.png"></div><div class="car"><img src="data:image/06-car.png"><img src="data:image/06-seller.png"><img src="data:image/06-address.png"><img src="data:image/06-worker.png"><img src="data:image/06-say.png"></div><div class="buyer"><img src="data:image/06-person.png"><img src="data:image/06-door.png"></div></div></div><div class="section section7"><div class="content"><div class="star"><img src="data:image/07-star.png"><img src="data:image/07-star.png"><img src="data:image/07-star.png"><img src="data:image/07-star.png"><img src="data:image/07-star.png"></div><div class="text"><img src="data:image/07-text.png"></div></div></div><div class="section section8"><div class="content"><div class="btn"><img src="data:image/08-btn01.png"><img src="data:image/08-btn02.gif"><!-- 鼠标放上显示按按钮的gif图片 --></div><div class="again"><img src="data:image/08-again.png"></div><div class="hand"><img src="data:image/08-hand.png"></div></div></div><!-- section设置每一块分页  --></div><script type="text/javascript" src="js/jquery-v1.12.4.js"></script><script type="text/javascript" src="js/jquery.fullpage.js"></script><script type="text/javascript" src="js/index.js"></script></body></html>

js代码：

$(function(){// jquery的入口函数，可以配置fullpage组件$('.container').fullpage({sectionsColor:["#fadd67", "#84a2d4", "#ef674d", "#ffeedd", "#d04759", "#84d9ed", "#8ac060"],verticalCentered:false,// fullpage默认是垂直居中靠左对齐的，改为原始的左上对齐navigation:true,// 默认页面右侧点击的导航栏不显示navigationPosition:'right',// 为什么没用不清楚afterLoad:function(link,index){// link是导航链接，顶部导航栏，index是第几屏的索引，从1开始$('.section').eq(index-1).addClass('into');// 为加载完成之后的section添加一个into类名},onLeave:function(index,nextIndex,direction){// 三个参数分别代表当前页面，和跳转的页面，最后是切换的方向if(index==2 && nextIndex==3){$('.section').eq(index-1).addClass('leaved');// 离开第二页进入第三页，添加leaved类名，并有回调函数}else if(index==3 && nextIndex==4){$('.section').eq(index-1).addClass('leaved');}else if(index==5 && nextIndex==6){$('.section').eq(index-1).addClass('leaved');$('.section6 .box').addClass('show');// 第五屏进入第六屏的时候，快递包裹做动画，添加一个类}else if(index==6 && nextIndex==7){$('.section7 .text').addClass('show');$('.section7 .star img').each(function(i,item){$(this).delay(i*350).fadeIn();// 用jq可以通过display控制显示和隐藏，而用animation只能通过opacity来操作});}},afterRender:function(){// afterRender:是在页面渲染完毕之后，返回的回调函数$('.more').on('click',function(){$.fn.fullpage.moveSectionDown();// 点击更多切换到下一屏 $.fn后面添加自定义插件});$('.section4 .cart').on('transitionend',function(){$('.section4 .address').show().find('img:last').fadeIn(1000);$('.section4 .text').addClass('show');// 给快递单上文字添加属性名});// jquery语句中，on()里面是‘transitionend’是表示过渡执行完，后面是回调处理函数$('.section8').on('mousemove',function(e){$(this).find('.hand').css({left:e.clientX-200,top:e.clientY-150// 注意鼠标的位置不能在小手图片上面，不然点不到目标图片});// 将手图片的位置跟鼠标实际位置设置成一样的位置，达到移动的目的}).find('.again').on('click',function(){$('.into,.leaved,.show').removeClass('into').removeClass('leaved').removeClass('show');// 重置带有into类名，leaved和show的类名动画$('.content [style]').removeAttr('style');// style左右两边的括号，就是正则表达式，将所有类型的style属性筛选出来。$.fn.fullpage.moveTo(1);// moveTo()是fullpage插件提供的方法，跳到第一页。});},scrollingSpeed:1000// 两幅页面之间切换时间，默认是700毫秒，设为1s,方便计算同组动画时间});
});

css代码：

.goto{width: 100px;height: 100px;border-radius: 50%;position: fixed;right: 30px;top: 30px;z-index: 999;/*因为可能下面的背景的权重还被设置高了，这里添加一个较大且吉利权重*/
}
.more{position: fixed;right: 60px;bottom: 80px;z-index: 999;animation: moreAni 0.7s linear infinite alternate;
}
/*公共部分模块结束*/.content{width: 900px;height: 600px;position: absolute;bottom: 0;left: 50%;margin-left: -450px;/*background: rgba(0,0,0,0.1);*/
}
/*内容容器*/.section1{background: url("../image/01-bg.png") no-repeat center bottom;
}
.section1 .goods{text-align: center;margin-top: 250px;
}
.section1 .sofa{position: absolute;left: 230px;top: 170px;animation: sofaAni 1.2s ease infinite alternate;/*换个口味，将动画方式设置为ease*/
}
.section1 .flag{position: absolute;right: -50px;top: 20px;animation: flagAni 1s linear infinite alternate;/*infinite和alternate分别代表无穷次循环和逆播放*//*逆播放是c3动画新的特性，前面解决方式是添加一个中间状态*/
}@keyframes flagAni{from{transform: translateY(-30px);}/*开始时状态*//*50%{transform: translateY(0);}c2技术为了解决上顶点和下定点的变换的突兀，添加一个中间状态*/to{transform: translateY(30px);}/*结束时状态*/
}
/*在c3技术中定义动画序列是通过@keyframe后面添加序列名，在animate调用时，第一个参数就是序列名*/
/*横幅动画*/@keyframes moreAni{from{transform: translateY(20px);}to{transform: translateY(-20px);}
}@keyframes sofaAni{from{transform: translateY(-25px);}to{transform: translateY(25px);}
}
/*第一屏模块结束*/.section2{background: url("../image/02-bg.png") no-repeat center bottom;
}
.section2 .goods{position: absolute;left: 50%;margin-left: -220px;bottom: 210px;transform-origin: right bottom;transform: scale(0);
}
.section2 .sofa{transform: scale(0.5);position: absolute;left: 292px;top: 132px;z-index: 9999;opacity: 0;
}
.section .input{position: absolute;right: 190px;top: 121px;transform:scale(0.6);/*缩放旋转等操作，默认的原点是中心*/transform-origin: right top;/*将原点转换为右上角点*/opacity: 0;
}
.section .input .search{}
.section .input .key{position: absolute;left: 100px;top: 4px;opacity: 0;
}
.section .text{text-align: center;
}
.section .text .text2{position: absolute;opacity: 0;
}.section2.into .text .text1{/*into类名，是除了第一屏之外，被加载之后页面添加的*/position: absolute;opacity: 0;
}
.section2.into .text .text2{position: static;opacity: 1;transform: opacity 4s;
}
.section2.into .input{animation: inputAni1 3s ease forwards;/*forwards控制动画完成之后的状态，默认是回到一开始的状态*/
}
.section2.into .input .key{opacity: 1;transition: all 1s linear 1s;/*将关键字的出现延时一秒执行，因为搜索框整体进入需要延时的位置需要1s*/
}
.section2.into .goods{transform: scale(1);transition: all 1s ease 2s;/*等待搜索框向上移动，所以延时两秒执行*/
}@keyframes inputAni1{0%{transform: translate(1000px,130px);/*起始位置*/opacity: 1}33.3%{transform: translate(-160px,130px);/*屏幕中间*/}66.6%{transform: translate(-160px,130px);/*位置不变，搜索框大小改变*/}100%{transform: scale(0.6);/*定位都去掉就回到一开始的位置，上面的位移是根据原来位置的相对位移*/opacity: 1}
}
/*第二屏模块结束*/.section2.leaved .sofa{animation: sofaAni2 1s ease;
}
@keyframes sofaAni2{/*上面也有一个沙发相关的动画，起名是sofa1*/from{opacity: 1;}to{opacity: 1;transform: translate(-80px,800px);/*translate放在一起写，前一个参数指定x轴，后一个Y轴*/}
}.section3{background: url("../image/03-bg.png") no-repeat center bottom;
}
.section3 .sofa{position: absolute;left: 212px;top: 180px;display: none;/*动画执行完之前，不显示第三屏的沙发*/
}
.section3 .change{position: absolute;right: 115px;bottom: 170px;
}.section3 .change img:last-child{position: absolute;opacity: 0;
}
.section3 .cart img:last-child{position: absolute;opacity: 0;
}.section3 .cart{position: absolute;right: 155px;bottom: 90px;
}/*将选沙发的盒子放在右下角*/.section3.into .change img:first-child{display: none;
}
.section3.into .change img:last-child{position: static;opacity: 1;transition: all 1s linear;
}
.section3.into .cart img:first-child{display: none;
}
.section3.into .cart img:last-child{position: static;opacity: 1;transition: all 1s linear;
}.section3.into .sofa{display: block;z-index: 999;
}.section3.leaved .sofa{animation: sofaAni3  1s ease;
}
/*离开第三屏，进入第四屏需要做的动画*/@keyframes sofaAni3{form{}to{transform: translate(200px,730px) rotate(45deg);/*transform属性可以添加多个属性，中间通过空格隔开*//*同时，注意坐标轴是转换后的坐标轴，所以先把坐标转换放在前面*/}
}/*第三屏模块结束*/.section4{background: url(../image/04-bg.png) no-repeat center bottom;
}
.section4 .cloud{position: absolute;left: -200px;top: -80px;animation: cloudAni 13s linear infinite alternate;/*alternate:动画应该轮流反向播放infinite:执行无数次*/
}@keyframes cloudAni{from{}to{transform: translateX(600px);}
}.section4 .text{text-align: center;margin-top: 120px;
}
.section4 .text img:last-child{position: absolute;opacity: 0;
}.section4 .text.show img:first-child{position: absolute;opacity: 0;
}
.section4 .text.show img:last-child{position: static;opacity: 1;transition: all 1s linear;
}.section4 .cart{text-align: center;margin-top: 40px;position: relative;z-index: 1002;/*购物车在沙发前面显示*/
}
.section4 .sofa{position: absolute;top: 156px;left: 413px;transform: rotate(45deg);opacity: 0;
}
.section4 .address{position: absolute;width: 283px;height: 270px;   /*不然图片的盒子还有内外边距，确定下来*/left: 50%;transform: translateX(-50%);bottom: 150px;display: none;
}
.section4 .address img:last-child{position: absolute;top: 60px;left: 50%;transform: translateX(-50%);z-index: 999;display: none;
}.section4.into .sofa{opacity: 1;transition: transform  3s;transform: translateX(1300px);
}
.section4.into .cart{transition: all 3s;transform: translateX(1300px);
}
/*第四屏模块结束*/.section5{background:url(../image/05-bg.png);
}
.section5 .sofa{position: absolute;bottom: 100px;left: 100px;transform: rotate(30deg);opacity: 0;z-index: 1001;
}
.section5 .card{position: absolute;left: 0;top: 180px;z-index: 1002;
}
.section5 .card img:first-child{position: relative;z-index: 999;
}
.section5 .card img:last-child{position: absolute;left: 130px;top: -80px;transform: translateY(80px);
}.section5 .mouse{position: absolute;right: 0;top: 0;height: 100%;width: 400px;overflow: hidden;
}
.section5 .mouse img:nth-child(-n+2){position: absolute;top: -430px;right: 80px;
}
/*:nth-child是用来指定第几个元素，n可是具体数字以及单双数和计算公式*/
.section5 .mouse img:nth-child(2){opacity: 0;/*display方式不好控制动画的显示和隐藏*/
}
.section5 .mouse img:last-child{position: absolute;top: 240px;right: 130px;transform: translateY(500px);
}
.section5.into .mouse img:last-child{transition: all 1s ease;transform: none;
}
.section5.into .mouse img:nth-child(2){transition: all 0.1s linear 1s;/*延时1s为了等待手移上来*/opacity: 1;
}.section5.into .sofa{animation: sofaAni5 2s linear 1.1s forwards;
}
@keyframes sofaAni5{from{transform: translateY(-1000px) rotate(30deg);opacity: 1;}50%{transform: translateY(-150px) rotate(30deg);}100%{opacity: 1;transform: rotate(30deg);}
}.section5.into .card img:last-child{transition: all 1s linear 2.2s;transform: none;
}.section5.leaved .sofa{/*transform: translateY(700px) rotate(30deg) scale(0.3);transition: all 1s linear;*/animation: sofaAni56 1s linear;
}@keyframes sofaAni56{from{opacity: 1;transform: scale(0.3);}to{opacity: 1;transform: translateY(470px) rotate(30deg) scale(0.3);}
}
/*第五屏模块结束*/.section6{background: url(../image/06-bg.png) no-repeat 25% bottom;/*基于css3的背景百分比*/
}
.section6.into{transition: background 2s linear 1s;background: url(../image/06-bg.png) no-repeat 100% bottom;
}
/*在第六屏渲染完成之后再执行动画，不然开始就会执行，造成不到动画*/.section6 .cloud{position: absolute;top: -50px;left: 0;
}
.section6 .cloud img:first-child{animation: cloudAni6 20s linear infinite alternate;
}
.section6 .cloud img:last-child{position: absolute;top: 0;left: 0;animation: cloudAni6 30s linear infinite alternate;
}@keyframes cloudAni6{from{}to{transform: translateX(1000px);}
}.section6 .text{position: absolute;top: 40px;left: 85px;
}
.section6 .text img:last-child{position: absolute;opacity: 0;left: 0;top: 0;
}.section6 .box{position: absolute;top: 120px;left: 140px;transform: translateX(-500px);
}
.section6 .box.show{animation: boxAni6 2s linear forwards;}
@keyframes boxAni6{from{transition: translateX(-800px);}50%{transform: none;}to{transform: translateY(330px) scale(0.3);}
}.section6 .car{position: absolute;bottom: 0;left: 120px;z-index: 1003;/*车子的层级需要比包裹大，才能显示车子遮住包裹*/
}
.section6 .car img{position: absolute;opacity: 0;left: 0;/*top: 0;*/
}
.section6 .car img:first-child{opacity: 1;position: relative;
}.section6 .car img:nth-child(2){left: 160px;top: -50px;
}
.section6 .car img:nth-child(3){left: 160px;top: -50px;
}.section6.into .car img:nth-child(2){transition: all 0.25s 1.15s;opacity: 1;
}
.section6.into .car img:nth-child(3){transition: all 0.25s 1.75s;opacity: 1;
}.section6 .car img:nth-child(4){left: 0;bottom: 0;opacity: 1;transform: scale(0);transform-origin: left bottom;/*指定以左下角作为动画的原点*/
}.section6.into .car img:nth-child(4){animation: workerAni6 2.5s linear 2s forwards;
}
.section6.into .text img:first-child{opacity: 0;transition: all 0.1s linear 4.5s;
}
.section6.into .text img:last-child{opacity: 1;transition: all 1s linear 4.5s;
}
@keyframes workerAni6{from{transform: scale(0);}33.3%{transform: scale(1);}66.7%{transform: scale(1) translateY(-110px);}to{transform: scale(1) translateY(-110px) translateX(150px);}
}
/*快递员动画*/.section6 .car img:last-child{left: 350px;top: -420px;
}
.section6.into .car img:last-child{opacity: 1;transition: all 0.5s linear 4.5s;
}
/*收货语句动画*/.section6 .buyer{position: absolute;right: -35px;bottom: 116px;width: 106px;height: 150px;
}
.section6 .buyer img:first-child{position: absolute;right: 0;bottom: 0;transform-origin: right bottom;transform: scale(0);
}
.section6 .buyer img:last-child{opacity: 0;
}.section6.into .buyer img:first-child{transform: scale(1);right: 200px;transition: all 0.4s linear 5.35s,right 0.75s linear 5.5s;/*两个动画的属性，中间通过逗号隔开*/
}
.section6.into .buyer img:last-child{opacity: 1;transition: all 0.4s linear 5s;
}
/*第六屏模块结束*/.section7{background: url(../image/07-bg.png) no-repeat bottom;
}
.section7 .star{position: absolute;left: 156px;top: 143px;
}.section7 .star img{float: left;/*左浮动并清除原来的间距*/margin-right: 7px;display: none;
}
.section7 .text{position: absolute;left: 160px;top: 180px;opacity: 0;transform-origin: left bottom;transform: scale(0);
}
.section7 .text.show{transform: none;animation: textAni7 0.5s ease 2s forwards;
}
@keyframes textAni7{from{}70%{transform: scale(1.3);opacity: 1;}to{transform: none; opacity: 1;}
}
/*第七屏模块结束*/.section8{background: url(../image/08-bg.png);
}
.section8 .btn{width: 389px;height: 160px;position: absolute;left: 50%;transform: translateX(-50%);
}
.section8 .btn img:last-child{position: absolute;left: 0;top: 0;opacity: 0;
}
.section .btn:hover img:last-child{opacity: 1;
}
.section8 .again{position: absolute;right: 0;top: 80px;
}
.section8 .hand{position: absolute;left: 50%;top: 100px;margin-left: -85px;
}

H5C3动画实例，通过基于jQuery的fullpage插件完成相关推荐

html5卷轴展开动画,8款基于Jquery的WEB前端动画特效
超级绚丽,20款前端动画特效,轰炸你的眼睛,一定要看到最后! 1.超炫酷的30个jQuery按钮悬停动画按钮插件是最常见的jQuery插件之一,因为它用途广泛,而且配置起来最为方便.今天我们要分享的 ...
基于jQuery.i18n.properties插件实现前端页面国家化
一.简介在介绍jQuery.i18n.properties 之前,我们先来看一下什么是国际化.国家化英文单词为:Internationalization,又称 i18n,"i"为 ...
基于jquery的分页插件
一.效果图. 二.html示例. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">&l ...
html 拖拽选择表格,JS拖动选择table里的单元格完整实例【基于jQuery】
本文实例讲述了JS拖动选择table里的单元格.分享给大家供大家参考,具体如下: 用JS 实现类似Excel里面动态选择单元格的例子,从网上得到的例子,先记录在这里,以后参考用. www.jb51.n ...
基于jQuery的窗口插件：jMessageBox
在WinForm程序开发中,经常用MessageBox弹出某些提示,功能虽简单但却非常的实用!而在Web页面中,浏览器也提供了Alert或Confirm等脚本语句用于弹出提示窗口,如下图: 但是 ...
html5 jquery魔方,基于jquery的魔方插件
/** * @Author: zql * @Version:1.0 * @Date:2019-05-29 * Licensed under the MIT license */ "use s ...
基于jquery.fixedheadertable 表格插件左侧固定对齐
2019独角兽企业重金招聘Python工程师标准>>> jquery.fixedheadertable 经测试在固定1列和2列时是对齐的,2列以上明显不对齐,需要js做调整 $(do ...
《基于JQuery和CSS的特效整理》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅 https://www.web ...
10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

H5C3动画实例，通过基于jQuery的fullpage插件完成

要点：

H5C3动画实例，通过基于jQuery的fullpage插件完成相关推荐

最新文章

热门文章