BeoPlay
还有什么类似的网站吗?
引自腾讯全端 AlloyTeam 团队视差滚动的爱情故事
【定义】
所谓的视差滚动，就是在页面滚动过程中，多层次的元素进行不同程度的位移，带来立体的视差效果。还有很多的奇思妙想的展现方式，都是滚动页面触发的，也可称为视差滚动。视差滚动里面最基础的就是切换背景，这点其实一个CSS就满足了
【视差滚动原理一】
background-attachment: fixed || scroll || local
默认是scroll，内容跟着背景走，而视差滚动页面里用fixed，背景相对页面固定而不跟内容滚动。
很快地我就做出了一个demo出来，还特意配上几张优雅的图片和极富内涵的词句，女神一定会因为我的文采而爱上我的，而且，那些看似简单的“我是内容”不断重复，其实只要细心就会发现里面隐藏着我的表白，情商如此之高的女神，一定会发现，然后我们就可以幸福的在一起，在爱情的滋润下，我很快就能升职加薪，当上总经理，出任CEO，赢取白富美，走上人生巅峰。哈哈哈哈哈哈哈哈，诶？好像不用赢取白富美，那就挑战白富美。
demo1_base
“咦，怎么是静态的，谭伟X，能不能帮我做个会动的那种的视差滚动，麻烦了么么哒~”
。。。。。。居然完全没有留意到我溢出的文采和隐藏的表白。。。。。没事！虽然跟我预想有点出入，但女神这是在考验我！
【视差滚动原理二】
女神想要些更加丰富的效果，也对，像我这么内涵有档次的程序员，当然要来写非常酷的动画效果。
在原理的demo1的基础上，我在scroll事件上添加一些动画事件。
<code class="language-js"><span class="nb">window</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'scroll'</span><span class="p">,</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">){</span>
<span class="kd">var</span> <span class="nx">scrollTop</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">scrollY</span><span class="p">;</span>
<span class="k">if</span><span class="p">(</span><span class="nx">scrollTop</span> <span class="o">></span> <span class="mi">0</span> <span class="o">&&</span> <span class="nx">scrollTop</span> <span class="o"> <span class="nx">articleHeight</span><span class="p">){</span>
<span class="nx">title1</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'title-anim'</span><span class="p">);</span>
<span class="nx">content1</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'content-anim'</span><span class="p">);</span>
<span class="p">}</span><span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">scrollTop</span> <span class="o">>=</span> <span class="nx">articleHeight</span> <span class="o">&&</span> <span class="nx">scrollTop</span> <span class="o"> <span class="nx">articleHeight</span><span class="o">*</span><span class="mi">2</span><span class="p">){</span>
<span class="nx">title2</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'title-anim'</span><span class="p">);</span>
<span class="nx">content2</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'content-anim'</span><span class="p">);</span>
<span class="p">}</span><span class="k">else</span> <span class="k">if</span><span class="p">(</span><span class="nx">scrollTop</span> <span class="o">>=</span> <span class="nx">articleHeight</span><span class="o">*</span><span class="mi">2</span> <span class="o">&&</span> <span class="nx">scrollTop</span> <span class="o"> <span class="nx">articleHeight</span><span class="o">*</span><span class="mi">3</span><span class="p">){</span>
<span class="nx">title3</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'title-anim2'</span><span class="p">);</span>
<span class="nx">content3</span><span class="p">.</span><span class="nx">classList</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="s1">'content-anim'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">})</span>
</span></span></span></code>
http://ianlunn.co.uk/plugins/jquery-parallax/
类似Nike for a Better World 产品展示页面的视差滚动效果。
水平方向的视差滚动。
New Zealand
The New Zealand 是一家介绍新西兰旅游的网站。
Diablo Media
Diablo Media 是一家线上营销代理公司：为广告主和出版商发布产品和作品。
360 Long Road ZurichNetlash bSeen
Netlash BSeen 是由 Netlash 创建人和线上营销代理 bSeen 合并之后新创建的一家代理公司。
Ito Sio CeniSullivanIutopiCultural SolutionsGo Up
Go Up 是一家意大利广告代理公司。
Ito Sio Ceni 是一家波兰的广播公司，
SullivanSullivan 是一家提供从各个方面提升用户接触度服务的代理公司。
IutopiIutopi 是一家品牌、平面设计和网页设计代理公司。
Cultural SolutionsCultural Solutions 是英国的一家企业管理代理公司。
Go UpGo Up 是一家意大利广告代理公司。
【参考资料】
[1]http://www.damndigital.com/archives/37242
[2]http://www.cnblogs.com/lhb25/archive/2011/06/01/parallax-scrolling-in-web-design.html
——————————————————————————————————————
=-=||| 各位说我文不对题的页面，其实是问题提到的网页改版了……之前的确实是视差滚动的。你看我楼下那个早期回答也是这样的类型
基于码农的价值观，完全未能捕捉到题主单纯只是为了寻求一个名词解释的动机。
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
