像这种网站效果，整屏整屏换有没有什么名字？

BeoPlay
还有什么类似的网站吗?

回复内容：

正好昨天看到一个这个插件：fullPage.js One Page Scroll Site Plugin


话说最近这样的页面展示效果使用的很多啊，比如说这几天很火的锤子手机： 首页 - 锤子科技
还有知乎广告出去的某浏览器的首页：千寻浏览器
Apple 官网的 iPhone 5c 展示也采用的就是这样的方式，特别生动优雅 FullScreen Backgrounds

Github：alvarotrigo/fullPage.js 路 GitHub

引自腾讯全端 AlloyTeam 团队视差滚动的爱情故事

【定义】

所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了

【视差滚动原理一】
background-attachment: fixed || scroll || local
默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。

很快地我就做出了一个demo出来，还特意配上几张优雅的图片和极富内涵的词句，女神一定会因为我的文采而爱上我的，而且，那些看似简单的“我是内容”不断重复，其实只要细心就会发现里面隐藏着我的表白，情商如此之高的女神，一定会发现，然后我们就可以幸福的在一起，在爱情的滋润下，我很快就能升职加薪，当上总经理，出任CEO，赢取白富美，走上人生巅峰。哈哈哈哈哈哈哈哈，诶？好像不用赢取白富美，那就挑战白富美。

demo1_base

“咦，怎么是静态的，谭伟X，能不能帮我做个会动的那种的视差滚动，麻烦了么么哒~”

。。。。。。居然完全没有留意到我溢出的文采和隐藏的表白。。。。。没事！虽然跟我预想有点出入，但女神这是在考验我！

【视差滚动原理二】
女神想要些更加丰富的效果，也对，像我这么内涵有档次的程序员，当然要来写非常酷的动画效果。
在原理的demo1的基础上，我在scroll事件上添加一些动画事件。

var scrollTop = window.scrollY; if(scrollTop > 0 && scrollTop < articleHeight){ title1.classList.add('title-anim'); content1.classList.add('content-anim'); }else if(scrollTop >= articleHeight && scrollTop < articleHeight*2){ title2.classList.add('title-anim'); content2.classList.add('content-anim'); }else if(scrollTop >= articleHeight*2 && scrollTop < articleHeight*3){ title3.classList.add('title-anim2'); content3.classList.add('content-anim'); } }) 这种叫 视差滚动（Parallax Scrolling）。即多个元素以不同的层次堆叠在一起，并随鼠标滚轮滚动而进行位置移动，进而形成立体的运动效果。


比如这个游戏画面里通过人物马里奥、前景、背景着三个部分的移动速率的不同来实现立体效果。类比网页也是如此。一个滚动视察的网站至少会有以下几层 ：背景层，内容层，贴图层。

类似网站：

http://nikebetterworld.com/

http://ianlunn.co.uk/plugins/jquery-parallax/