页面滚动视差效果的实现

0x01

今天在http://materializecss.com/发现一个视差滚动的例子，想自己实现一下视差效果。

打开例子

0x02思路

首先呢，我们可以选择监听scroll和mousewheel事件，说说各自的优缺点。

事件监听

scroll
优点：当页面滚动到边界时，不会触发事件。
缺点：需要自己判断鼠标滚动方向。

mousewheel
优点：可以直接知道滚动方向。
缺点：当到达页面边界，页面已经不能在滚动下去的时候，还是会触发事件，需要做判断，而且兼容性上，chrome和火狐是有些区别的，chrome下是mousewheel，而Firefox是DOMMouseScroll。

判断滚轮方向

这里我选择了熟悉的scroll事件，判断滚轮方向很简单，只需要记录最后一次document.body.scrollTop的位置，下次触发事件的时候相减，负数则是up，正数就是down。

0x03 代码编写

视差效果结构

我们需要一个容器存放图片，有两种方法，一种是img标签，另一种是background-image，实现视差效果其实就是改变图片的位置。
我采用中间是img标签的方法，外面的wrapper定高，overflow:hidden，里面的img样式如下，这样图片就被限制显示在wrapper中，只需要改变img的top值即可。当然，用css3动画是最好的，配合will-change:transform（具体介绍），效率很高（先留坑，以后写）。

img.scroll {
    position: absolute;
    left: 0;
    top: -50%;
    width: 100%;
    }

<div class="container">
            <header>
            header
            </header>
            <section class="main">
                txt
            </section>
            <section class="main">
                <img class="scroll" src="http://i4.tietuku.com/1484b5e707d50dd4.jpg" />
            </section>
            <section class="main">
                txt
            </section>
            <section class="main">
                <img class="scroll" src="http://i4.tietuku.com/741bc28754271af9.jpg" />
            </section>
        </div>

判断图片位置

                    imgs.each(function(index, val) {
                        //计算图片在文档中的位置
                        var top = $(val).offset().top;
                        var bottom = top + 300;
                        //和当前视口位置作比较，
                        //首先，图片的顶部要大于视口底部（图片刚刚露个头）
                        //其次，图片的底部要大于视口底部（图片只露出尾巴）
                        if (top < viewBottom && (bottom > viewTop)) {
                            var diff = (direction ? '+' : '-') + '=' + '15'
                            console.log(index, diff)
                            $(val).css({
                                'top': diff
                            });
                        }
                    })

我们先获得一个需要执行视差效果的imglist，每次触发scroll事件时，，我们要从中筛选出需要执行的img。

• 当图片进入：img.top < view.posBottom
  
• 当图片退出：img.bottom > view.posTop
  

图片初始位置

图片的初始Top设置成50%，即居中显示，这样上下移动不容易超出边界。

最终效果

See the Pen ZQqWYp by chenchen (@larry011) on CodePen.

参考连接

JS滚轮事件(mousewheel/DOMMouseScroll)了解