視覺差效果淺析

前言

視覺差效果是一種比較炫酷的網站效果，最近在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地址）