網頁設計

關於網頁設計的技術或相關資訊分享

Parallax Scrolling

網頁版面設計 - 視差捲動 (PARALLAX SCROLLING) 教學

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

Plugin相關資料

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的網站去參考使用囉

Please enable the javascript to submit this form