接下来我们来实现一个基于fullpage.js的 购物网站宣传页面。
点击可下载全部素材，及源码分析：案例源码 https://download.csdn.net/download/zero________________/10424445
1.先引入接下来需要的文件
<!-- 引入的 初识化css fullpage css --> <link rel="stylesheet" href="css/base.css" /> <!-- 引入自己的css --> <link rel="stylesheet" href="css/mypage.css" /> <link rel="stylesheet" href="css/jquery.fullPage.css" /> <!-- y这是一个jquery插件，所以先引入jquery --> <script src="js/jquery.min.js"></script> <!-- 如果想要 easing 缓动动画 那就引入 easing js --> <script src="js/jquery.easing.1.3.js"></script> <script src="js/jquery.fullPage.min.js"></script> <!-- 引入自己的js --> <script src="js/myPage.js"></script>
2.html部分
<!-- 直接进入 -->
<a href="#" class="go">
<img src="images/t1ldiffkjfxxxzhxzd-101-101.png" alt="">
</a>
<!-- next 下一屏幕 -->
<a href="javascript:;">
<img src="images/next.png" class="next next_undown" alt="">
</a>
<div id="fullpage">
<!-- 第一屏幕制作 -->
<div class="section section1">
<img src="images/t1wsqsfgnaxxxmjxp6-470-50.png" class="fly updown" alt="">
<img src="images/t1xccqfflgxxxild.png" class="shirt01 shirt-updown" alt="">
<img src="images/t1iakufbxxxxctz4tl-824-274.png" class="goods" alt="">
</div>
<!-- 第二屏幕制作 -->
<div class="section section2">
<div class="computer">
<div class="search move">
<img src="images/search-words.png" class="search-wrods" alt="">
</div>
<img src="images/search-02-1.png" class="search-02-1" alt="">
<img src="images/goods-441-218.png" class="goods-02" alt="">
<!-- 沙发 -->
<img src="images/shirt-02-207-166.png" class="shirt-02" alt="">
<!-- 白色底盒子用来遮挡沙发的 -->
<div class="cover move"></div>
</div>
<img src="images/words-01-361-25.png" class="words-01" alt="">
<img src="images/words-02.png" class="words-02" alt="">
</div>
<!-- 第三屏幕制作 -->
<div class="section section3">
<div class="main">
<div class="select">
<img src="images/img-01.gif" class="img" alt="">
<img src="images/img-01-a.gif" class="img img-01-a" alt="">
<img src="images/btn-01.gif" class="btn" alt="">
<img src="images/btn-01-a.gif" class="btn btn-01-a" alt="">
</div>
沙发
<img src="images/shirt-02-207-166.png" class="shirt-03" alt="">
<img src="images/t1f.png" class="t1f" alt="">
</div>
</div>
<!-- 第四屏幕制作 -->
<div class="section section4">
<img src="images/cloud.png" class="cloud cloud-back1">
<img src="images/words-04.png" class="word">
<img src="images/words-04-a.png" class="word words-04-a">
<div class="car move"> <!-- 购物车 -->
<img src="images/t1f.png" class="car-img" alt="">
<img src="images/car.png" alt="">
</div>
<div class="note move">
<img src="images/t1sqosfx8bxxa9wx_i-173-47.png" class="note-img" alt="">
<img src="images/t1.png" alt="">
</div>
</div>
<!-- 第五屏幕制作 -->
<div class="section section5">
<img src="images/words-05.png" class="words-05">
<img src="images/card-05.png" class="card-05">
<img src="images/order-05.png" class="order-05">
<img src="images/t1f.png" class="t1f-05">
<div class="overFlow">
<img src="images/mouse-05.png" class="mouse">
<img src="images/mouse-05-a.png" class="mouse mouse-05-a">
<img src="images/hand-05.png" class="hand-05">
</div>
</div>
<!-- 第6屏幕制作 -->
<div class="section section6">
<img src="images/box.png" alt="" class="box-06"/>
<img src="images/car-06.png" alt="" class="car-06"/>
<img src="images/cloud-06.png" alt="" class="cloud-06"/>
<img src="images/88.png" alt="" class="pop-06"/>
<img src="images/man.png" alt="" class="boy">
<img src="images/women.png" alt="" class="girl">
<img src="images/door.png" alt="" class="door">
<img src="images/t1kzyqffnexxbcrepj-139-173.png" alt="" class="pop-07">
<img src="images/words-06-a.png" alt="" class="words-06-a">
</div>
<!-- 第7屏幕制作 -->
<div class="section section7">
<div class="star move">
</div>
<img src="images/good-07.png" alt="" class="good-07">
</div>
<!-- 第8屏幕制作 -->
<div class="section section8">
<a href="#" class="beginShoping">
<img src="images/btn-08.png" alt="">
<img src="images/btn-08-a.gif" alt="" class="btn-08-a">
</a>
<img src="images/again.png" class="again" alt="">
<img src="images/hand-08.png" class="hand-08">
</div>
</div>
3.css部分
html, body, .section {
min-height: 600px;
min-width: 1000px;
/* 最小的宽度和高度 防止 缩放过于变形 */
}
#fp-nav ul li a span { /* 提高层叠性 */
background: #f40 !important;
}
.next {
position: fixed;
bottom: 120px;
right: 10%;
z-index: 999;
}
/* 第一屏幕制作 start */
.section1 {
background: #fadd67 url(../images/t1fpyqfltdxxaiulhh-990-600.png) no-repeat center bottom;
}
.fly {
position: absolute;
right: 20%;
top: 10%;
}
.shirt01 {
position: absolute;
left: 50%;
margin-left: -200px;
bottom: 335px;
}
.goods {
position: absolute;
left: 50%;
margin-left: -420px;
bottom: 150px;
}
/* 第一屏幕制作 end */
/* 第二屏幕制作 start */
.section2 {
background: #84a2d4 url(../images/t1zdgpfi8exxca6rfn-2000-600.png) no-repeat center bottom;
z-index: 2;
}
.computer {
width: 990px;
height: 500px;
position: absolute;
left: 50%;
/* margin-left: 495px; */
transform: translateX(-50%);
/* background: rgba(0,0,0,.3); */
bottom: 0;
}
.search {
width: 222px;
height: 45px;
background: url(../images/search.png) no-repeat;
right: -30px;
bottom: 300px;
position: absolute;
display: none;
}
.search-wrods {
position: absolute;
right: 32px;
top: 5px;
opacity: 0; /* 因为后面我们做淡入淡出的效果，所以我们用透明度 不要用 display */
}
.search-02-1 {
position: absolute;
bottom: 300px;
right: 370px;
display: none; /* 这个不要淡入淡出，里面显示或者隐藏 */
}
.goods-02 {
height: 100px;
position: absolute;
bottom: 217px;
right: 270px;
display: none; /* jquery 里面用 show hide 隐藏 */
}
.words-01, .words-02 {
position: absolute;
left: 50%;
bottom: 550px;
transform: translateX(-50%);
}
.words-02 {
opacity: 0;
}
.shirt-02 {
position: absolute;
bottom: 345px;
left: 395px;
width: 100px;
display: none;
z-index: 10;
}
.cover {
position: absolute;
bottom: 334px;
right: 496px;
width: 101px;
height: 90px;
z-index: 5;
background-color: #fff;
display: none;
}
/* 第二屏幕制作 end */
/* 第三屏幕制作 start */
.section3 {
background: #ef674d;
z-index: 1;
}
.main {
position: absolute;
width: 700px;
height: 500px;
background: url(../images/main.png) no-repeat center center;
left: 50%;
transform: translateX(-50%);
bottom: 50px;
}
.select {
width: 300px;
height: 250px;
position: absolute;
bottom: 0;
right: 8px;
/* background-color: pink; */
}
.img {
position: absolute;
top: 0;
}
.img-01-a {
opacity: 0; /* 这里我们先不用 display: 而用 opacity 淡入效果 */
}
.btn {
position: absolute;
bottom: 10px;
}
.btn-01-a {
opacity: 0; /* 这里我们先不用 display: 而用 opacity 淡入效果 */
}
/* 沙发 */
.shirt-03,
.t1f {
position: absolute;
left: 115px;
bottom: 200px;
display: none;
}
/* 第三屏幕制作 end */
/* 第四屏幕制作 start */
.section4 {
background: #fed url(../images/t1iresfnxaxxca6rfn-2000-600.png) no-repeat center bottom;
}
.cloud {
position: absolute;
left: 50%;
bottom: 550px;
}
.word {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 500px;
}
.words-04-a {
opacity: 0;
}
.car {
width: 500px;
position: absolute;
/* background-color: pink; */
bottom: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 50;
}
.car-img {
position: absolute;
bottom: 200px;
left: 50%;
transform: translateX(-50%);
z-index: -1; /* 负值 往下叠加 */
display: none;
}
.note {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: pink;
bottom: 180px;
display: none;
}
.note-img {
position: absolute;
top: 60px;
left: 60px;
opacity: 0; /* 淡入淡出 opacity */
}
/* 第四屏幕制作 end */
/* 第五屏幕制作 start */
.section5 {
background: #d04759 url(../images/t1yisqfa4exxa3gmkg-2000-1500.png);
/* overflow: hidden; */
perspective: 500;
-webkit-perspective: 500;
z-index: 1;
}
.words-05 {
position: absolute;
left: 20%;
top: 10%;
opacity: 0;
}
.card-05 {
position: absolute;
left: 20%;
bottom: 200px;
z-index: 10;
}
.order-05 {
position: absolute;
left: 27%;
bottom: 270px;
}
.t1f-05 {
position: absolute;
bottom: 800px;
left: 25%;
display: none;
}
.mouse {
position: absolute;
right: 20%;
bottom: 200px;
}
.mouse-05-a {
opacity: 0;
}
.hand-05 {
position: absolute;
right: 24%;
bottom: -375px;
}
.overFlow { /* 切掉 鼠标小尾巴 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
/* 第五屏幕制作 end */
/* 第6屏幕制作 start */
.section6 {
background: #84d9ed url(../images/t1dvj.fn0gxxb0_fua-2500-600.png) no-repeat 25% 100%;
}
.box-06 {
position: absolute;
left: 123px;
bottom: 500px;
z-index: 50;
}
.car-06 {
position: absolute;
bottom: 0;
right: 50%;
z-index: 60;
}
.cloud-06 {
position: absolute;
left: 50%;
bottom: 550px;
animation: cloud6 30s;
}
@keyframes cloud6 {
50% {
left: 10%;
}
}
.pop-06 {
position: absolute;
bottom: 119px;
right: 48%;
display: none;
z-index: 50;
}
.boy {
right: 50%;
bottom: 0;
position: absolute;
height: 100px;
}
.girl {
position: absolute;
right: 315px;
bottom: 116px;
height: 123px;
display: none;
z-index: 50;
}
.door {
position: absolute;
right: 285px;
bottom: 116px;
opacity: 0;
}
.pop-07 {
position: absolute;
right: 445px;
bottom: 400px;
z-index: 40;
display: none;
}
.words-06-a {
position: absolute;
left: 10%;
bottom: 479px;
display: none;
}
/* 第6屏幕制作 end */
/* 第7屏幕制作 start */
.section7 {
background: #8ac060 url(../images/t1wf1tfctaxxa3gmkg-2000-1500.png) no-repeat 50% 100%;
}
.star {
position: absolute;
left: 50%;
bottom: 439px;
margin-left: -295px;
width: 0;
height: 20px;
background: url(../images/star.png) no-repeat;
background-size: 97px;
}
.good-07 {
position: absolute;
bottom: 382px;
left: 50%;
margin-left: -289px;
display: none;
}
/* 第7屏幕制作 end */
/* 第8屏幕制作 start */
.section8 {
background: url(../images/ksgw.png);
}
.beginShoping {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 365px;
}
.btn-08-a {
position: absolute;
top: 0;
left: 0;
display: none;
}
.again {
position: absolute;
bottom: 403px;
left: 50%;
margin-left: 240px;
cursor: pointer;
}
.hand-08 {
position: absolute;
bottom: 0;
left: 50%;
}
/* 第8屏幕制作 end */
/* 直接进入购物中心 */
.go {
position: fixed;
top: 5%;
right: 5%;
z-index: 999;
}
/* 动画组 */
.next_undown {
animation: next .6s linear infinite; /* linear 匀速 */
}
@keyframes next { /* 类似于js 的声明函数 function */
50% {
bottom: 100px;
}
100% {
bottom: 120px;
}
}
.updown { /* 类似于 js 调用函数 */
animation: fly 3s linear infinite; /* linear 匀速 */
}
.shirt-updown {
animation: shirt01 2.5s linear infinite; /* linear 匀速 */
}
@keyframes fly { /* 类似于js 的声明函数 function */
0% {
top: 10%;
}
50% {
top: 20%;
}
100% {
top: 10%;
}
}
@keyframes shirt01 { /* 类似于js 的声明函数 function */
50% {
bottom: 360px;
}
100% {
bottom: 335px;
}
}
/* 云彩第一组 */
.cloud-back1 {
animation: cloud 60s linear infinite;
}
@keyframes cloud {
0% {
left: 50%;
}
50% {
left: -10%;
}
100% {
left: 50%;
}
}
.words-05-a {
animation: words5 3s forwards;
/* animation-fill-mode: forwards; 让我们的动画保持最后一帧状态 不循环 */
}
@keyframes words5 {
100% {
opacity: 1;
transform: translateZ(100px) rotateY(360deg);
}
}
点击可下载全部素材，及源码分析：案例源码 https://download.csdn.net/download/zero________________/10424445
3.js部分
$(function () {
var k = $(window).height(); // 当前屏幕的高度
var flag = false; // 控制动画
// 点击next 往下播放一屏幕
$(".next").click(function (event) {
$.fn.fullpage.moveSectionDown();
});
$('#fullpage').fullpage({ // fullpage 方法里面接受json对象形式
// 是否显示项目导航
navigation: true,
// navigationPosition: "left",
// loopBottom: true,
// 滚动速度，单位为毫秒
scrollingSpeed: 1200,
// 回调函数滚动到第二屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
afterLoad: function (anchorLink, index) {
// 往第2屏幕滚动的时候，next 先消失 等所有动画都完毕了 next 才淡出
if (index == 2) {
$(".next").fadeOut();
// 缓动动画要加到时间的后面，回调函数的前面
$(".search").show().animate({"right": 370}, 1500, "easeOutBack", function () {
// 方块走进来，沙发2个字显示
$(".search-wrods").animate({"opacity": 1}, 500, function () {
$(".search").hide();
// 图片 往右上角， 缩小
$(".search-02-1").show().animate({"height": 30, "right": 250, "bottom": 452}, 1000);
// 同时 沙发图片 变大
$(".goods-02").show().animate({"height": 218}, 1000, "easeInOutQuart");
// 同时 白色文字渐渐的显示出来
$(".words-02").animate({"opacity": 1}, 500, function () {
$(".next").fadeIn();
})
});
});
}
},
// 刚开始滚动屏幕就触发的回调函数 onLeave
// 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
onLeave: function (index, nextIndex, direction) {
$(".next").fadeOut();
if (index == 2 && nextIndex == 3) {
// 当第二屏幕往第三屏幕滚动的时候， 沙发显示并且往第三屏幕跑 白色盒子显示
// 沙发要往第三屏幕走， 走的距离 就是 当前哦屏幕的高度 - main 到底部的高度 - 沙发到main的距离 (当前屏幕的高度 - 250 )
$(".shirt-02").show().animate({"bottom": -(k - 250), "width": 207, "left": 260}, 2000, function () {
$(".img-01-a").animate({"opacity": 1}, 500, function () {
$(".btn-01-a").animate({"opacity": 1}, 500, function () {
$(".next").fadeIn();
});
})
});
$(".cover").show();
}
// 第3屏幕到第4屏幕过渡
if (index == 3 && nextIndex == 4) {
$(".shirt-02").hide();
// 沙发的距离 当前屏幕的高度 - 250 + 第三屏幕的 50距离
$(".t1f").show().animate({"bottom": -((k - 250) + 50), "left": 260}, 2000, function () {
$(this).hide(); // 动画完毕之后，自动隐藏
$(".car-img").show();
// 这购物车就开始往右走
$(".car").animate({"left": "150%"}, 3000, "easeInElastic", function () {
$(".note").show();
$(".note-img, .words-04-a").animate({"opacity": 1}, 1000, function () {
$(".next").fadeIn();
});
});
})
}
// 第4屏幕到第5屏幕过渡
if (index == 4 && nextIndex == 5) {
// 小手上来
$(".hand-05").animate({"bottom": 0}, 2000, function () {
// 鼠标显示
$(".mouse-05-a").animate({"opacity": 1});
// 沙发从 800 到 70
$(".t1f-05").show().animate({"bottom": 70}, 1000, function () {
// 单子上走 走完之后， 我们的文字翻转
$(".order-05").animate({"bottom": 390}, function () {
$(".words-05").addClass("words-05-a");
$(".next").fadeIn();
});
})
});
}
// 第5屏幕到第6屏幕过渡
if (index == 5 && nextIndex == 6) {
// 沙发的距离 当前屏幕的高度 减去 box 的 bottom 500
$(".t1f-05").animate({"bottom": -(k - 500), "left": "40%", "width": 65}, 1500, function () {
$(".t1f-05").hide();
});
$(".box-06").animate({"left": "38%"}, 1500, function () {
$(this).animate({"bottom": 40}, 500, function () {
$(this).hide();
// 行走的过程就是 背景移动的过程
// 背景jqury 里面改变比较麻烦 backgroundPositionX x坐标
//
$(".section6").animate({"backgroundPositionX": "100%"}, 4000, function () {
// 当背景动画执行完毕 boy 大小复原
$(".boy").animate({"height": 305, "bottom": 116}, 1000, function () {
$(this).animate({"right": 500}, 500, function () {
// 门显示出来 模拟打开门的效果
$(".door").animate({"opacity": 1}, 200, function () {
// 之后girl 显示出来
$(".girl").show().animate({"right": 350, "height": 306}, 500, function () {
$(".pop-07").show();
$(".next").fadeIn();
})
});
});
});
});
// 光的速度
$(".words-06-a").show().animate({"left": "30%"}, 2000, "easeOutElastic");
//
$(".pop-06").show();
});
});
}
// 第6屏幕到第7屏幕过渡
if (index == 6 && nextIndex == 7) {
setTimeout(function () {
$(".star").animate({"width": 120}, 500, function () {
$(".good-07").show();
$(".next").fadeIn();
});
}, 2000);
}
// 这是第8屏幕动画
// $(".beginShoping").mouseenter(function(event) {
// $(".btn-08-a").show();
// }).mouseleave(function(event) {
// $(".btn-08-a").hide();
// });
// hover 来替代更简洁 以后一个盒子鼠标经过显示离开隐藏 我们就可以用hover和toggle混搭想必也是极好的
$(".beginShoping").hover(function () {
$(".btn-08-a").toggle(); // toggle 显示和隐藏的切换
});
// 大手跟随鼠标移动
$(document).mousemove(function (event) {
var x = event.pageX - $(".hand-08").width() / 2; // 获得鼠标在页面中的x坐标
var y = event.pageY + 10; // 获得鼠标在页面中的y坐标
// 手的top 值不能小于 这个大小minY 当前屏幕的高度 K 减去手的高度 449
var minY = k - 449;
// 把 鼠标在页面中的坐标 给 hand 大手 left top
if (y < minY) {
y = minY;
}
$(".hand-08").css({"left": x, "top": y});
});
// 当我们点击 再来一次的 时候， 分两步进行
$(".again").click(function (event) {
// 1. 返回第1屏幕
$.fn.fullpage.moveTo(1);
// 2. 所有的动画都复原 就是原来没有看过的样子
// 核心原理就是 让我们的图片（做动画的元素 清除 行内样式就可以）
// 所有带有动画的div 盒子 添加 move 类名
$("img, .move").attr("style", "");
});
},
});
});
写了很多的注释，希望可以帮到大家,当然有什么不足的地方，希望大家可以指出来，共同努力共同进步。案例中用到了很多图片，都在上面链接地址中可以下载。