学习目标:

• 能够说出fullpage插件的使用基本思路
• 能写出购物案例屏幕滚动效果及其侧边栏制作
• 能写出第一屏布局及其动画效果
• 能写出第二屏布局及其动画效果
• 能写出第三屏布局及其动画效果
• 能写出第四、五、六、七屏布局及其动画效果
• 能写出第八屏布局及其动画效果

• 能写出添加键盘滚动以及重新开始播放动画

  typora-copy-images-to: media

购物网站宣传页面

案例目的：

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

fullpage 全屏插件

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

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

github 官网 https://github.com/alvarotrigo/fullPage.js

中文演示地址 http://www.dowebok.com/demo/2014/77/

主要功能有：

支持鼠标滚动

支持前进后退和键盘控制

多个回调函数

支持手机、平板触摸事件

支持 CSS3 动画

支持窗口缩放

窗口缩放时自动调整

可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

引用文件

<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script><!-- jquery.easings.min.js 是必须的，用于 easing 参数，也可以使用完整的 jQuery UI 代替 -->
<script src="js/jquery.easings.min.js"></script><script src="js/jquery.fullPage.js"></script>

HTML 结构

<div id="fullpage"><div class="section">第一屏</div><div class="section">第二屏</div><div class="section"><div class="slide">第三屏的第一屏</div><div class="slide">第三屏的第二屏</div><div class="slide">第三屏的第三屏</div><div class="slide">第三屏的第四屏</div></div><div class="section">第四屏</div>
</div>

JavaScript入口函数

$(function(){$('#fullpage').fullpage();
});

fullpage 详细参数

fullPage.js 方法

注意方法的使用时需要添加：

$.fn.fullpage 比如

$.fn.fullpage.moveTo(1);

回调函数

jQuery Easing.js 插件

介绍：easing是jquery的一个插件，使用它可以创建更加绚丽的动画效果。

环境：因为easing是jQuery的插件，所以必须是在引入jquery之后再引入它

如果只想要简单的写法就用

$(".car").animate({"left": "150%"},  4000, "easeInElastic", function() {});

easing:格式为json,{duration:持续时间,easing:过渡效果,complete:成功后的回调函数}

$(element).animate({ height:500, width:600 },{ easing: 'easeInOutQuad', duration: 500, complete: function(){}
}); 

1. linear
2. swing
3. easeInQuad
4. easeOutQuad
5. easeInOutQuad
6. easeInCubic
7. easeOutCubic
8. easeInOutCubic
9. easeInQuart
10. easeOutQuart
11. easeInOutQuart
12. easeInQuint
13. easeOutQuint
14. easeInOutQuint
15. easeInExpo
16. easeOutExpo
17. easeInOutExpo
18. easeInSine
19. easeOutSine
20. easeInOutSine
21. easeInCirc
22. easeOutCirc
23. easeInOutCirc
24. easeInElastic
25. easeOutElastic
26. easeInOutElastic
27. easeInBack
28. easeOutBack
29. easeInOutBack
30. easeInBounce
31. easeOutBounce
32. easeInOutBounce

https://matthewlein.com/experiments/easing.html

动画复习

视差滚动插件

视差滚动（Parallax Scrolling）指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术

主要核心就是前景和背景以不同的速度移动，从而创造出3D效果。 这种效果可以给网站一个很好的补充。

特性

视差滚动效果酷炫，适合于个性展示的场合。

视差滚动徐徐展开，适合于娓娓道来，讲故事的场合。

视差滚动容易迷航，需要具备较强的导航功能。

原理

传统的网页的文字、图片、背景都是一起按照相同方向相同速度滚动的，而视差滚动则是在滚动的时候，内容和多层次的背景实现或不同速度，或不同方向的运动。

有的时候也可以加上一些透明度、大小的动画来优化显示。

利用background-attachment属性实现。

background-attachment: fixed || scroll || local

Stellar.js是什么？

stellar.js 是一个 jQuery插件，能很容易地给网站添加视差滚动效果。 尽管已经停止了维护，但它非常稳定，与最新版本的jQuery兼容，很多开发者也在使用它。 这个插件在jQuery插件库里很流行。

http://markdalgleish.com/projects/stellar.js/ 官网

引用 js包

<script src="path/to/jquery/jquery.min.js"></script>
<script src="path/to/jquery.stellar.min.js"></script>

引用html

<div class="content" id="content1"><p>TEXT HERE</p>
</div>
<div class="content" id="content2"><p>TEXT HERE</p>
</div>
<div class="content" id="content3" data-stellar-background-ratio="0.5"><p>TEXT HERE</p>
</div>
<div class="content" id="content4" data-stellar-background-ratio="0.5"><p>TEXT HERE</p>
</div>
<div class="content" id="content5" data-stellar-background-ratio="0.5"><p>TEXT HERE</p>
</div>
<div class="content" id="content6" data-stellar-background-ratio="0.5"><p>TEXT HERE</p>
</div> 

引入CSS

body {font-size: 20px;color: white;text-shadow: 0 1px 0 black, 0 0 5px black;
}
p {padding: 0 0.5em;margin: 0;
}
.content {background-attachment: fixed;height: 400px;
}
#content1 {background-image: url("xxx.jpg");
}
#content2 {background-image: url("xxx.jpg");
}
#content3 {background-image: url("xxx.jpg");
}
#content4 {background-image: url("xxx.jpg");
}
#content5 {background-image: url("xxx.jpg");");
}
#content6 {background-image: url("xxx.jpg");
}

js调用函数

$.stellar({horizontalScrolling: false,responsive: true
});

详细参数

QQ TIM 案例