昨天介紹了視差效果(parallax)在網頁設計上的應用，今天小編來教大家自己做，這樣下次有需要的時候就可以自己做出很炫的網頁設計了。今天要教大家使用的是STELLAR.JS這個jquery的plugin

Plugin相關資料

• 名稱：STELLAR.JS
• 官網：http://markdalgleish.com/projects/stellar.js/

DEMO

小編先自己做了一個DEMO給大家看，Parallax Effect Demo

教學

1.首先先載入必須的js檔

<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.stellar.min.js"></script>

2.接著指定要使用效果的元素

例如

<script>
$(document).ready(function () {
// For example:
$(window).stellar();
// or:
$('#main').stellar();
});

你可以只指定某一個元素或者是像小編下面寫，讓他作用在整個window上

<script>
$(document).ready(function () {
$.stellar();
});
</script>

3.指定各元素的滾動速度

<div data-stellar-ratio="2">

數字越大表示該元素會移動的越快，大於1會比視窗滾動的速度還快，小於1的話則是會比視窗滾動的速度還慢，大致上就是這樣的拉。

其他還有更多的參數請大家在自己到plugin的網站去參考使用囉