接下来我们来实现一个基于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", ""); }); }, }); });
写了很多的注释,希望可以帮到大家,当然有什么不足的地方,希望大家可以指出来,共同努力共同进步。案例中用到了很多图片,都在上面链接地址中可以下载。