網頁設計中的多層視差滾動效果 (Parallax scrolling)

觀察上面的圖片,裡面有三張圖片,分別放置於不同階層,如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫,但背景圖片動得比較慢,前景圖片動得比較快,我們就可以感受到較符合生活經驗的景深效果。 繼續閱讀


觀察上面的圖片,裡面有三張圖片,分別放置於不同階層,如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫,但背景圖片動得比較慢,前景圖片動得比較快,我們就可以感受到較符合生活經驗的景深效果。 繼續閱讀
其實jQuery本身透過.load函式就簡化了非常多傳統統AJAX的使用步驟,而EZJax外掛更加簡化,讓幾乎不懂AJAX原理與細節的人也能很容易的達成動態載入內容的功能,除了有助於搜尋引擎最佳化(SEO)外,在載入內容時也能安排一些滑動或漸入漸出的特效。
另外根據官網的說明,此外掛支援 IE6以上, FireFox, Safari, 及 Opera。先到EZJax官網下載EZJax,然後就開始試用吧!
要使用EZJax外掛,首先當然是載入EZJax:
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.ezjax.js"></script>
下一步就是呼叫ezjax,進行初始化,然後就可以用囉:
$(document).ready(function(){<br /> $('.ezjax').ezjax();<br />});接下來的code,就是動態載入123.html的內容到指定的區域,首先放一個class為ezjax的連結:
<a class="ezjax" href="http://www.blogger.com/123.html">載入</a>
我們希望點下連結後,會動態載入另一個頁面的內容,在想要秀出內容的地方放一個id為ezjax_content的div標籤就大功告成了:
<div id="ezjax_content"></div>