内容

学习目标

购物网站宣传页面

能够说出fullpage插件的使用基本思路
能写出购物案例屏幕滚动效果及其侧边栏制作
能写出第一屏布局及其动画效果
能写出第二屏布局及其动画效果
能写出第三屏布局及其动画效果
能写出第四、五、六、七屏布局及其动画效果
能写出第八屏布局及其动画效果
能写出添加键盘滚动以及重新开始播放动画

复习---复习前面学过的HTML5+CSS3
综合---综合运用jquery完成案例
拓展---可以做宣传页面或者个人简历

fullPage.js

简介

全屏滚动效果，原生js也很好实现，主要是用mousewheel鼠标滚轮滚动事件，来判断上滚动还是下滚动，之后设置每次滚动的高度为屏幕的高度即可。但是，虽然效果简单，但是兼容性很差，要做很多兼容处理及比较麻烦啦! (了解一下，有兴趣的同学可以研究一下)

fullPage.js是一个基于jQuery的全屏插件，它能够帮你很方便、很轻松的制作出全屏网站。

主要功能有:
-支持鼠标滚动
-支持前进后退和键盘控制
-多个回调函数
-支持手机、平板触摸事件
-支持CSS3动画支持窗口缩放
-窗口缩放时自动调整
-可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

github官网：github.com/alvarotrigo…
演示地址：www.dowebok.com/demo/2014/7…

详细参数

选项	类型	默认值	说明

verticalCentered	字符串	true	内容是否垂直居中
resize	布尔值	false	字体是否随着窗口缩放而缩放
sectionColor	函数	无	设置背景颜色
anchors	数组	无	定义锚链接
scrollingSpeed	整数	700	滚动速度，单位为毫秒
easing	字符串	easeInQuart	滚动动画方式
menu	布尔值	false	绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation	布尔值	false	是否显示项目导航
navigationPosition	字符串	right	项目导航的位置，可选 left 或 right

navigationTooltips	数组	空	项目导航的 tip
slidesNavigation	布尔值	false	是否显示左右滑块的项目导航
slidesNavPosition	字符串	bottom	左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor	字符串	#fff	左右滑块的箭头的背景颜色
loopBottom	布尔值	false	滚动到最底部后是否滚回顶部
loopTop	布尔值	false	滚动到最顶部后是否滚底部
loopHorizontal	布尔值	true	左右滑块是否循环滑动
autoScrolling	布尔值	true	是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow	布尔值	false	内容超过满屏后是否显示滚动条
css3	布尔值	false	是否使用 CSS3 transforms 滚动
paddingTop	字符串	0	与顶部的距离
paddingBottom	字符串	0	与底部距离
fixedElements	字符串	无
normalScrollElements		无
keyboardScrolling	布尔值	true	是否使用键盘方向键导航
touchSensitivity	整数	5
continuousVertical	布尔值	false	是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor	布尔值	true
normalScrollElementTouchThreshold	整数	5

回调函数

名称	说明
afterLoad	滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave	滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算；direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender	页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad	滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave	某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

项目 - 准备阶段

1 下载第三方库

这些都是第三方库，直接下载、复制到项目中使用即可。
base.css 初始化样式。
jquery.easings.min.js jquery插件实现缓动动画。
jquery.easings.min.js 是必须的，用于easing 参数，也可以使用完整的jQuery UI代替。

2 搭建项目结构，html结构，引用文件

index.html

//注意引入顺序：先引入jquery，再引入fullpage。
<link rel="stylesheet" type="text/css" href="css/base.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.fullPage.min.js" type="text/javascript" charset="utf-8"></script>

<div id="fullpage">
    <div class="section">第一屏</div>
    <div class="section">第二屏</div>
    <div class="section">第三屏</div>
    <div class="section">第四屏</div>
    <div class="section">第五屏</div>
    <div class="section">第六屏</div>
    <div class="section">第七屏</div>
    <div class="section">第八屏</div>
</div>

3 执行入口函数fullpage

myPage.js，里面写自己的js代码。
执行fullpage()方法，即可实现全屏滚动效果。

//myPage.js
$(function(){
    $('#fullpage').fullpage()
})

目前的页面效果：

项目 - 开发阶段

添加背景颜色和背景图片

创建一个文件 myPage.css，里面写自己的css代码。

背景颜色和背景图片可以同时设置。

fullPage.js配置项中只能为每屏添加背景颜色，背景图片只能通过css来设置。

/* 8个背景样式 */
.section:nth-child(1){
    background: #fadd67 url(../images/t1fpyqfltdxxaiulhh-990-600.png) no-repeat center bottom;
}
.section:nth-child(2){
    background: #84a2d4 url(../images/t1zdgpfi8exxca6rfn-2000-600.png) no-repeat center bottom;
}
.section:nth-child(3){
    background: #ef674d;
}
.section:nth-child(4){
    background: #fed url(../images/t1iresfnxaxxca6rfn-2000-600.png) no-repeat center bottom;
}
.section:nth-child(5){
    background: #d04759 url(../images/t1yisqfa4exxa3gmkg-2000-1500.png);
}
.section:nth-child(6){
    background: #84d9ed url(../images/t1dvj.fn0gxxb0_fua-2500-600.png) no-repeat 25% 100%;
}
.section:nth-child(7){
    background: #8ac060 url(../images/t1wf1tfctaxxa3gmkg-2000-1500.png) no-repeat 50% 100%;
}
.section:nth-child(8){
    background: url(../images/loader.gif) center center no-repeat;
}

第一屏的背景图片：原始大小：990px x 600px，显示位置：底部居中。其它屏则依此类推即可。

背景图片的注意事项：
-有的屏只有背景色，没有背景图片。
-背景图片的原始大小不一样，有的比较大，比屏幕宽度还大。
-比屏幕宽度还大的背景图片在动画中会发生变化。
-背景图片在页面中的显示位置不一样。
-背景图片有的不平铺，有的平铺。

添加小圆点

fullpage()方法接收一个参数：一个配置对象。

navigation选项：是否显示导航圆点。
keyboardScrolling选项：是否使用键盘方向键导航。
...
其它配置项请查看官方文档，根据需要进行添加即可。

$(function(){
    $('#fullpage').fullpage({
        navigation: true,
        keyboardScrolling: true
    })
})

Q: 如何修改导航圆点默认的样式呢？
F12查看样式，复制类名，修改样式，覆盖掉默认的样式即可。

/* 自定义导航圆点样式 */
#fp-nav ul li a span {
    background: hotpink;
}

第一屏：布局

第一屏放了很多图片，图片的位置根据需求进行调整。

//index.html
<div class="section">
    <img src="images/t1wsqsfgnaxxxmjxp6-470-50.png" class="fly" >
    <img src="images/t1xccqfflgxxxild.png" class="shafa" >
    <img src="images/t1iakufbxxxxctz4tl-824-274.png" class="many" >
</div>

//myPage.css
.fly{
    position: absolute;
    right: 20%;
    top: 10%;
}
.shafa{
    position: absolute;
    left: 50%;
    margin-left: -200px;
    bottom: 335px;
}
.many{
    position: absolute;
    left: 50%;
    margin-left: -400px;
    bottom: 150px;
}

第一屏：动画

这里定义了一个上下来回移动的动画 fly，然后应用到页面上的一张图片上。

<div class="section">
    <img src="images/t1wsqsfgnaxxxmjxp6-470-50.png" class="fly updown" >
   ...
</div>

.updown {
    animation: fly 3s linear infinite;
}

@keyframes fly {
    0% {
            top: 10%;
    }
    50% {
            top: 20%;
    }
    100% {
            top: 10%;
    }
}

第二屏：动画时机

动画开始的时机：

第二屏滚动结束后，动画才会开始。
fullPage.js插件提供了一些回调函数。
如afterLoad，该回调函数会在滚动完成后触发。

第二屏：动画

哪些元素有动画效果？
搜索框、"沙发"文字、沙发列表、黑色语句、白色语句。它们都是图片。

搜索框、"沙发"文字的动画：
-先向左移动，再先上移动。
-"沙发"文字的透明度从0变到1。
-向上移动时搜索框会缩小。
-图片替换：一开始搜索框、"沙发"文字是两张图片，但是缩放时，使用一张图片比较好，所以，向左移动结束后，会替换成一张图片。

沙发列表的动画：
-搜索框向上移动时，沙发列表同时从小变到大，从而显示出来。

黑色语句、白色语句的动画：
-白色语句覆盖在黑色语句上面，开始时透明度为0，不可见。
-后来白色语句opacity变化为1，覆盖黑色语句。

//index.html

<!-- 第二屏 开始 -->
<div class="section">
    <img src="images/words-01-361-25.png" class="title" >
    <img src="images/words-02.png" class="title2" >
    <div class="computer">
        <div class="search">
            <img src="images/search-words.png" class="wld" >
        </div>
        <img src="images/shafa-one.png" class="search2" >
        <img src="images/goods-441-218.png" class="list" >
    </div>
</div>
<!-- 第二屏 结束 -->

//myPage.css

/* 第二屏 开始 */
.computer{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 990px;
	height: 500px;
	/* background: rgba(0, 0, 0, 0.3); */
}
.search{
	display: none;
	position: absolute;
	right: -100px;
	bottom: 150px;
	width: 222px;
	height: 45px;
	background: url(../images/search.png) no-repeat;
}
.search2{
	display: block;
	display: none;
	position: absolute;
	right: 370px;
	bottom: 150px;
	width: 222px;
	height: 45px;
}
.wld{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
}
.list{
	display: none;
	position: absolute;
	right: 250px;
	bottom: 80px;
	height: 50px;
}
.title, .title2{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 550px;
}
.title2{
	 opacity: 0;
 }
/* 第二屏 结束 */

//myPage.js

$(function(){
    $('#fullpage').fullpage({
        //配置
        navigation: true,
        keyboardScrolling: true,

        //回调函数
        afterLoad: function(anchorLink, index){ //index 当前处于哪一屏，从1开始
            if(index === 2){ //判断是否是滚动到了第2屏
                //搜索框显示，向左移动
                $('.search').show().animate({"right": 370}, 1500, function(){
                    //文字显示
                    $('.wld').animate({"opacity": 1}, 1000, function(){
                        //两张图片隐藏
                        $('.search').hide()
                        //一张图片显示，向右上角移动，同时缩小
                        $('.search2').show().animate({
                            "width": 148,
                            "height": 30,
                            "right": 250,
                            "bottom": 320
                        }, 500)
                        //沙发列表显示，放大
                        $('.list').show().animate({"height": 218}, 1000)
                        //白色语句显示
                        $('.title2').animate({"opacity": 1}, 500)
                    })
                })
            }
        }
    })
})

第二屏动画效果：

第三屏：动画

沙发会从第二屏移动到第三屏。

移动的沙发是一张单独的图片，开始时是覆盖在第二屏沙发列表图片的上面，然后再移动到第三屏中。

沙发移动到第三屏后，用一个白色遮罩覆盖原来的位置，形成一个“空位”的效果。

动画时机：开始滚动时，沙发移动动画就开始。

关键点1：沙发移动的距离。
不同屏幕的视口高度不同，要保证沙发能移动到同一个位置。则沙发在垂直方向上移动的距离需要动态计算，公式：屏幕高度（变化值） - 某个固定值。

关键点2：沙发移动的开始时机。
第二屏的动画全部完成后，滚动屏幕，沙发才能开始移动。

商品参数、购买按钮的动画：
两张图片重叠在一起，其中一张以opacity:0先隐藏起来，再执行animate()方法修改opacity为1。

//index.html

<!-- 第二屏 开始 -->
<div class="section">
    <img src="images/words-01-361-25.png" class="title" >
    <img src="images/words-02.png" class="title2" >
    <div class="computer">
        <div class="search">
                <img src="images/search-words.png" class="wld" >
        </div>
        <img src="images/shafa-one.png" class="search2" >
        <img src="images/goods-441-218.png" class="list" >
        <!-- 沙发 -->
        <img src="images/shirt-02-207-166.png" alt="" class="shafa2">
        <!-- 白色遮罩 -->
        <div class="cover"></div>
    </div>
</div>
<!-- 第二屏 结束 -->
<!-- 第三屏 开始 -->
<div class="section">
    <div class="main">
        <div class="select">
            <img src="images/img-01.gif" alt="" class="params">
            <img src="images/img-01-a.gif" alt="" class="params2">
            <img src="images/btn-01.gif" alt="" class="btn">
            <img src="images/btn-01-a.gif" alt="" class="btn2">
        </div>
        <!-- 沙发 -->
        <img src="images/shirt-02-207-166.png" alt="" class="shafa3">
    </div>
</div>
<!-- 第三屏 结束 -->

//myPage.css

/* 第二屏 开始 */
...
 /* 沙发*/
 .shafa2{
	 z-index: 10;
	 display: none;
	 position: absolute;
	 width: 100px;
	 bottom: 211px;
	 left: 415px;
 }
 /* 白色遮罩 */
 .cover{
	 z-index: 5;
	 display: none;
	 position: absolute;
	 width: 105px;
	 height: 90px;
	 bottom: 205px;
	 left: 412px;
	 background-color: #fff;
 }
/* 第二屏 结束 */
/* 第三屏 开始 */
.main{
	position: absolute;
	width: 700px;
	height: 500px;
	background: url(../images/main.png) no-repeat center center;
	left: 50%;
	transform: translateX(-50%);
	bottom: 50px;
}
.select{
	position: absolute;
	bottom: 0;
	right: 8px;
	width: 300px;
	height: 250px;
}
.params{
	width: 300px;
}
.btn{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10px;
}
.params2{
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 300px;
}
.btn2{
	opacity: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 10px;
}
/* 沙发 */
.shafa3{
	display: none;
	position: absolute;
	left: 115px;
	bottom: 200px;
}
/* 第三屏 结束 */

$(function(){
	//浏览器视口高度
	let screenHeight = $(window).height()
	let flag = false //沙发移动动画控制标识
	let flag2 = false //第二屏动画控制标识
	
	$('#fullpage').fullpage({
		//配置
		...
		
		//滚动结束的回调函数
		...
		
		//滚动开始的回调函数
		onLeave: function(index, nextIndex, direction){
			if(index === 2 && nextIndex === 3 && flag){
				//沙发移动动画
				$('.shafa2').show().animate({
					"bottom": -(screenHeight - 122),
					"left": 260,
					"width": 207
				}, 2000, function(){
					//商品参数动画
					$('.params2').animate({
						"opacity": 1
					}, 500, function(){
						//购买按钮动画
						$('.btn2').animate({
							"opacity": 1
						}, 500)
					})
				})
				$('.cover').show()
			}
		}
	})
})

第三屏的动画效果：

第四屏：动画

屏幕滚动时，沙发倾斜，向下移动到第四屏的购物车中。

倾斜的沙发是一张单独的图片。

云朵的动画：
云朵是一张独立的图片，来回左右移动即可。

关键点：计算沙发从第三屏移动到第四屏的距离

知识点列表

jquery

_ $()
参数：css选择器字符串
返回值：匹配的dom元素

_ show()、hide()
使用display属性，显示/隐藏某个dom元素。

_ animate()
开始一个动画。
参数1：一个对象，css属性键值对。
参数2：动画时长
参数3：动画结束后的回调函数

_ height()
读取浏览器视口高度
$(window).height()

fullPage.js

css

background

去掉a标签激活时默认的点虚线框

a:focus {
    outline: none;
}

z-index
层级越高，可以避免被其它元素覆盖。

z-index并没有那么简单。
如果两个子元素是处于同一个父盒子中的兄弟元素，则z-index值大的覆盖小的。
如果两个子元素不是处于同一个父盒子中，则z-index值大的不一定覆盖小的，不能直接比较。

position
fixed 固定定位。

aboslution 绝对定位。

animation
先使用 @keyframes 定义一个动画，再使用 animation 指定使用具体哪一个动画。
animation：动画名称动画时间运动曲线何时开始播放次数是否反方向;

哪些属性可以应用到动画中？
-位置：absoluted时的left、right、bottom、top
-透明度：opacity
-大小：width、height

_ 垂直水平居中。

绝对定位 + transform

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

_ opacity
使用opacity透明度来实现淡入淡出效果。

js

html

总结

_ 如何实现动画？
1 . css方式。
css中的animation属性、@keyframes。

2 . js方式。
fullPage.js插件相关事件、jQuery提供的animate()方法。

_ 如何保证动画的先后顺序？
页面上的多个元素都有动画时，它们的开始顺序可能不一样。有的动画是同时开始的，而有的是在前一个动画结束时才开始。
那么，如何能够控制它们的开始时机呢？
jQuery插件 animate()方法 第三个参数 是一个回调函数，该回调函数会在当前动画执行结束后调用。所以，可以在这个回调函数中执行一个新的动画，这样新动画就会在前一个动画结束时才开始。

_ 动画分类
1 . 位置的移动
实现方式：执行animate()方法来修改绝对定位absoluted属性left/right/bottom/top值。
2 . 大小的变化，即放大/缩小
实现方式：修改width/height值。
3 . 显示/隐藏
实现方式：修改display属性值none/block。
4 . 淡入淡出
实现方式：来修改opacity属性值0/1。

_ 该视频课程存在哪些问题？ ★
1 . 视频不完整，项目都没有教完。
2 . 页面的动画效果的一些细节存在有问题。
3 . 整体来说，这个课程质量不咋地。
4 . 只能用来了解一下fullPage.js插件、jQuery的基本使用：如何实现动画。

参考

官方文档

-fullPage.js插件演示地址
-fullPage.js github官网
-fullPage.js npm

视频教程

-全屏滚动插件fullpage使用-炫酷购物车案例-黑马程序员pink老师（素材已经更新） 2017
本案例采取fullpage全屏滚动插件可以让你快速高效的开发全屏滚动页面。

其它

进度：211212-211214（未完成，不想做了！）
练习目录：H:\学习课程\ediary日记\学习课程\项目实战-PC端\全屏滚动插件fullpage使用
学习资料目录：H:\学习课程\ediary日记\学习课程\项目实战-PC端\全屏滚动插件fullpage使用\课件

项目实战 -PC端全屏滚动宣传页案例

内容

学习目标

fullPage.js

简介

详细参数

回调函数

项目 - 准备阶段

1 下载第三方库

2 搭建项目结构，html结构，引用文件

3 执行入口函数fullpage

项目 - 开发阶段

添加背景颜色和背景图片

添加小圆点

第一屏：布局

第一屏：动画

第二屏：动画时机

第二屏：动画

第三屏：动画

第四屏：动画

知识点列表

jquery

fullPage.js

css

js

html

总结

参考

官方文档

视频教程

其它