最近对前端有点兴趣，最近碰见一个网站，但是对它这个网站有些地方的实现方法不是很懂！有没有人能解释下啊？

[iMouseWu]

http://www.guirebustini.com.br/
就是这个网页！有没有知道他这个模式显示的方式呀？
主要在这几个方面：
1.首页进去的页面，当滚动滑轮的时候该页面是不会移动的，当下一个页面达到满屏的时候，下一张页面出来，那么这张页面的位置也是不会变得。都是被后者慢慢覆盖！（这里经过我的测试各个div是一层覆盖一层的关系，也就是说这里是通过z-index来实现的，但是具体的能不能给点提示）.我觉得应该是滚动过程中，如果一个div已经满屏的话就给加一个fix，那么就可以实现了了！不知道对不对？
2.覆盖过程中，前一个页面的字和图片会有稍微上移的感觉，让人的感觉就是，这些字不是一下子被覆盖的！怎么感觉有点像响应式的味道！
这点又是怎么实现的
3.首页音乐框中背景原来是灰色的，但是鼠标移上去会有蓝色滑动出来，个人有种感觉是通过移动图片来实现的，就是修改图片的位置。但是这样子的话不是应该有2个div一个是灰色的，但是这样子不是会覆盖下面的div的内容为什么上面的字还是能显示出来。所以貌似这个假设不成立，能不能给点提示？
因为最近才接触前端，所以实现效果不是很懂！希望大家可以分析下！
谢谢的

[loethen]

视差滚动。google之。

[rrfeng]

滚动的时候这个页面的 chrome 进程 cpu 占用率达到了 50% ……

我是不是该换电脑了

[bunorte]

主要用到的技术是jquery的animate、相对定位，跟响应式没什么关系。详细的js代码页面底部都有了，仔细看看就明白了。不懂jquery的话下载个api手册看看。

[piresion]

看看苹果5c的页面：http://www.apple.com/cn/iphone-5c/

[anson0370]

1. 逐个 fixed 可以做到
2. 视差滚动没错
3. 这个最简单……纯CSS就行了 给你个简单的demo http://codepen.io/anson0370/pen/mpFuK

[anson0370]

才发现楼主居然有两个贴……另一个贴也已经有人回过了orz

[iMouseWu]

@anson0370 表示一下手贱，点啊点点错鸟！

[66beta]

始祖：Nike Better World

[iMouseWu]

@piresion 怎么赶脚5C的这个页面和这个略有所不同呀。0.0

[iMouseWu]

@loethen 已搜！终于明白了！好满足的感觉！THX

[iMouseWu]

@bunorte 我觉得这个，应该像1楼说的这样0.0，貌似用不到animate这个呀

[iMouseWu]

@rrfeng 貌似我只有35%.....好惊人的消耗啊！为什么会这样子....

[iMouseWu]

@66beta 现在NIKE的主页已经不是这种模式了呀。。。

[iMouseWu]

@emric 为了不污染视觉，这这里感谢之

[66beta]

@iMouseWu 这里有个克隆http://ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

[iMouseWu]

@anson0370 小手一抖２贴就出！ORZ TOO

[SharkIng]

记得V2有一个女生做那个网站前段时间测试版的时候就用的这个功能

[P233]

http://cdpn.io/LCBby

用了 skrollr 插件