2017年2月1日 星期三

[jQuery plugin] 簡單的視差滾動外掛- parallax.js

視差滾動簡單的說就是當使用者在捲動網頁的時候,網頁內的元素會有跟卷軸滾動速度不同步的效果,這個效果大致上是用 js 去控制它移動的速度,而也因為這個效果發展滿久的,所以也有不少好用的 plugin,這回介紹的就是簡單好用的 parallax.js。

外掛網址:
parallax.js

使用的話可以直接在 html 使用 attributes。
  1. <div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>  

js 的話則是這樣。
  1. $('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});  

一些參數的設定外掛頁面也有說明,特別要注意的是由於他的 z-index 預設是 -100,所以如果看不到外掛效果的話調整一下 z-index 應該就可以了。

這邊有我套用過的效果頁面
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...