CSS3網頁設計轉場效果示範

CSS3的轉場效果(transition)雖然未普及，但隨著IE的佔有率持續下滑和Chrome的持續上升，加上全面支援CSS3的IE10會在下年面世，距離大規模應用的日子相信愈來愈近。一些前衛的網頁設計師亦已經開始進行實驗性工作，今次介紹的網頁就是簡單在同一個屬性(property)套用兩組數值來測試效果，估不到的是原來只要簡單更改一些如letter-spacing和text-indent就可以產生有趣的效果。







筆者也因此改動了公司的頭版網頁設計，利用line-height為Firefox加入了少許CSS3的動態效果，製作十分簡單，而且運作起來的確比jQuery暢順，不過現段階最麻煩的是要為不同的瀏覽器加上不同的prefix，這方面還是要利用jQuery來幫忙一下。







有興趣的朋友可以到以下連結一看︰

CSS3網頁設計轉場效果示範



原文網址:

http://www.aveego.com/html/o_38771_/css3網頁設計轉場效果示範.html

jQuery網頁設計插件: 超小巧的幻燈片播放器Rhinofader

自從jQuery及mootools等Javascript程式庫的興起，幻燈片播放器(Slideshow)便在網頁設計界大行其道，亦是市場上最多插件的一類。今次介紹的Rhinofader犀牛播放器不但沒有特別新穎的功能，而且支援的過場效果亦只得一種，就是淡出淡入(Fade In Fade Out)的效果，不過就是因為功能簡單，使用起來非常容易，最重要是十分小巧，瘦身後(Minified)只有1kb，特別適合在流動網頁上使用。








首先在頁頭(Header)載入rhinofader.min.js，然後再簡單的呼叫rhinofader()就可以，支援的選項包括︰



showControl - 什麼時候顯示向前向後等控制按鈕

controlsPrevNext - 是否顯示向前向後按鈕

controlsPlayPause - 是否顯示暫定按鈕

autoPlay - 是否自動播放

pauseOnHover - 滑鼠覆蓋時是否暫定

showTime - 每張相片的顯示時間

effectTime - 過場效果的時間



順帶一提，除了圖片外，Rhinofader也支援普通的HTML元素，有興趣的朋友可以到Rhinofader一看。



原文網址:

http://www.aveego.com/html/o_38516_/jquery網頁設計插件-超小巧的幻燈片播放器rhinofader.html