绝地求生官网界面网页（pc端）

1.实现效果

2.效果与功能显示

1.工具条(第一屏）、导航条（吸顶）、移入弹出图片（交互）
2.菜单条（关联页面）
3.滚动的页面（全屏）
4.动效放大图片（交互）
5.背景视频（全屏）
6.扇叶图片显示（交互）

3.步骤

搭建基本结构（3）

	**利用fullpage插件，实现全屏滚动页面效果**

html:

js:

less:
定义第七屏尺寸

实现后：

工具条，导航条（1）

**显示工具条（第一屏），导航条（任意屏吸顶）**

html:

less


js:

实现后：

工具条，导航栏内部渲染(1)

html:

第一屏全屏视频（5）

less：
其他屏类似

菜单条（关联页面）（2）

**菜单条内fullpge实现页面翻动**

html:

js:

实现后：

less的

每个子菜单下添加active与fullpage关联，进而可以实现翻动关联页面的效果
实现后：

扇叶图片显示（交互）（6）

利用js的移入移出事件+动画移动位置实现

html：


LESS:

js的移出移入事件：

3.核心点，总结：

知识点：
1.fullpage（基于jQ的插件，实现特效）的使用。

bug1：解决视频播放问题，video的muted解决延迟，实现自动播放