视觉差效果浅析

前言

视觉差效果是一种比较炫酷的网站效果，最近在GitHub上闲逛的时候，看到视觉差效果相关的插件，就想看看是怎样的实现原理，本文仅仅是实现两种类似视觉差效果，对其实现原理介绍下。

具体实现

首先看看视觉差效果是什么效果，效果如下：

都设置了256fps，上图中的效果好像不明显，你可以点击这个链接，实际去体验下。

实际上视觉差效果有两种体现：

• 动与静的对比
• 都动，但速率不同有速度差

第一种动与静的体现，常见的是形式是背景图动，文本内容不同。
第二种是两个相邻元素存在速度差，可以明显体现出速度差，从而实现展开或覆盖效果。

本次demo就是实现上面两种，具体的效果如下：

序章一部分是体现动与静
序章二与三体验速度差的效果

下面就具体说说实现的原理，实际上核心的处理就是：

• scroll事件
• background属性
• transform: translateY

动与静的效果

在scroll事件下，结合scrollTop值设置background-position值来实现的

scroll: function(val, isTop) {
      // 设置background-position的值
      this.rellaxes.forEach(item => {
        item.style.cssText = `background: url(../images/parallax.jpg) center ${val}px no-repeat`;
      });
    },
    onEvents: function() {
      const that = this;
      const pos = this.currentPosition;
      window.addEventListener('scroll', function(e) {
       // 获取scrollTop
        const scrollTop = doc.documentElement.scrollTop || 
                          window.pageYOffset || 
                          doc.body.scrollTop;
        // 处理滑动到底部抖动问题
        if (htmlEle.scrollHeight - 5 <= htmlEle.clientHeight + scrollTop) return;
        // 判断向上滑动和向下滑动，计算backgound中的值
        const isToTop = scrollTop < pos;
        const currPos = isToTop ? scrollTop - pos : pos + scrollTop;
        that.currentPosition = currPos;
        that.scroll(currPos, isToTop);
      });

速度差效果

scroll事件 + transform translateY值得设置

通过不同的速度来设置每块区域的translateY值，从而体现速度差。

总结

这是一个小demo，体验效果没有专门的视觉差插件处理的效果好，如果你想要深入研究视觉差效果，这边有几个插件推荐：

• rellax：JS原生插件（Github地址）
• parallax：JQuery插件（Github地址）