rellax.js是一款輕量級的純JavaScript滾動視覺差特效外掛。rellax.js壓縮後的版本僅871個位元組，在手機等小螢幕裝置中，外掛會自動限制視覺差特性。
線上演示 下載
安裝
可以透過npm來安裝rellax.js視覺差外掛。
npm install rellax |
使用方法
在頁面中引入rellax.min.js檔案。
<script type="text/javascript" src="js/rellax.min.js"></script> |
HTML結構
為你需要設定視覺差效果的元素新增.rellax class類。然後透過data-rellax-speed屬性來設定該元素的相對滾動速度。數值越大，滾動的越快。
<div class="rellax"> I’m that default chill speed of "-2"</div><div class="rellax" data-rellax-speed="7"> I’m super fast!!</div><div class="rellax" data-rellax-speed="-4"> I’m extra slow and smooth</div> |
初始化外掛
在頁面的底部，<body>標籤之前新增下面的程式碼來初始化rellax.js視覺差外掛。
<script> // Accepts any class name var rellax = new Rellax('.rellax');</script> |