IT僧

Locomotive Scroll 更流暢的視差滾動 只能用微妙形容!

23 2 月, 2021 欣迪

最近接了一個專案，業主非常要求滑鼠滾輪的柔順感。

業主:「 你知道的，就是那種感覺啊! 很微妙，不知道怎麼說! 」

我: 「 是視差滾動嗎?」(傳了幾個 parallax 的網站過去)

業主: 「 有點類似，但是不太一樣，就是要滾動的很微妙! 你知道的阿~ 那樣阿~ 」

我當下的心情:

於是我又問: 「 有範例可以參考一下嗎? 」 由於新台幣太微妙，我當下的外在表現如下 :

業主 : 「 前幾天有看到，但是我也忘了再哪看到。就和一般的視差滾動不太一樣，要有點滑動感，很微妙。 」

我 : 「 不然我這幾天蒐集一下資料好了。 」

幾天後，被打槍了數十種範例之後 ，找到了這個套件。

試做個範例，傳過過去 5 分鐘後，業主來電 。

到底是什麼感覺呢，這是套件的 demo 連結 :
https://locomotivemtl.github.io/locomotive-scroll/

說穿了，就是一種滑鼠滾動停止之後，畫面緩緩剎車的緩衝效果。同時卷軸也微微的有一種慣性移動的感覺。嗯，好吧，是微妙沒錯!

套件 : Locomotive Scroll (Github)

其實官方文件的說明算是蠻詳細了，這邊針對重要參數和容易踩坑的點來說明一下，請點擊到 codepen 開啟會有比較好的觀看體驗。

See the Pen Locomotive scroll demo by it-monk by Dean (@hcd1983) on CodePen.dark

不管是使用 npm 或是直接用 cdn 匯入檔案，第一步都是新增一個 scroll 的作用區域。這邊是幾個比較重要的參數。

• el : 滾動效果的作用範圍，整個網站都要滑順的話，直接設定 “body”
• smooth : 設定為 true ，開啟滾動效果
• lerp : 視窗滾動的平滑感，設定的越快會感覺剎車越利，反之設定的小一點，則會感受到慢慢減速的感覺。最小是 0 ，最大是 1。這邊範例做 .02，讓大家清楚感受微妙。
• repeat : 物件如果有設定 data-scroll 每當物件進入視窗時，就會增加一個 is-inview 的 class，如果 repeat 設定成 true ， 每次物件進入或離開視線範圍內，都會依照狀態改變 class。

const scroll = new LocomotiveScroll({
    el: document.querySelector('#scroll-zone'),
    smooth: true,
  	repeat: true,
    lerp:.02
})

HTML 的部分，單就視差滾動效果來說。常用的參數如下:

• data-scroll : 必須要有這個參數才會被納入運算
• data-scroll-direction : 物件移動的方向，預設是 vertical ，設定成 horizontal 時則會左右移動。
• data-scroll-speed : 物件移動速度，螢幕往下捲動時，如果 data-scroll-direction 是 vertical 正值往上，負值往下；如果 data-scroll-direction 是 。

<div id="scroll-zone">
	<div class="title-container">
      <h1 data-scroll data-scroll-speed="-1">Locomotive Scroll 更流暢的 視差滾動</h1>
      <h2 data-scroll data-scroll-speed="-2">只能用微妙形容的滾動感!</h2> 
  	</div>
</div>  

比較容易踩坑的點是關於 fixed 的物件，因為它的原理是把整個作用區域做一個變形的延遲，也就是說如果你的 header 要固定在頂端，直接用在 css 把 header 的 position 設定為 fixed ，會直接隨各著整個容器的變形推到螢幕外，或中間。

它這邊提供了一個參數來定義一個 fixed 的物件。例如我們要添加一個 pin 在上面的 header，需要設定以下標籤:

• data-scroll : 必須要有這個參數才會被納入運算
• data-scroll-sticky : 產生固定在畫面的的效果
• data-scroll-target : sticky 效果的作用範圍，如果要一直維持在上方，就把作用範圍設定成一開始 js 設定的 el 選項，範例裡面是 #scroll-zone。

 <header data-scroll data-scroll-sticky data-scroll-target="#scroll-zone">
      Header
 </header>

如果要往滾動到某個區域才固定在畫面，就把 data-scroll-target 設定成該區域， data-scroll-offset 可以設置物件偏移的位置。

<div class="title-container">
  <header data-scroll data-scroll-sticky data-scroll-target=".title-container" class="header-titles" data-scroll-offset="-60">
      Submenu
  </header>
  <h1 data-scroll data-scroll-speed="1">Locomotive Scroll 更流暢的 視差滾動</h1>
  <h2 data-scroll data-scroll-speed="-1">只能用微妙形容的滾動感!</h2>
  <h1 data-scroll data-scroll-speed="1" data-scroll-direction="horizontal">我往左邊跑</h1>
  <h2 data-scroll data-scroll-speed="-1"  data-scroll-direction="horizontal">我往右邊跑</h2>
</div>

這樣大概初級的用法就到這邊了，下一篇再來寫一下滾輪事件的觸發吧。

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚

姓名

Email*