欣迪Avatar

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

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

我: 「 是視差滾動嗎?」(傳了幾個 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

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

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *