jQuery 動畫效果 熱門文章推薦的好幫手

3107

Preview Summary

website Reviews : 38 5.0

網頁中達成動態效果有幾種方式,例如 JavaScript、CSS、jQuery 函式運用等方式,但此類特效也有所謂的「時尚風格」。近期一些創新品牌開始使用 jQuery 動畫效果的「微互動」UX 設計趨勢,商務網站更是加強利用各式前端框架程式庫聚焦於產品當中。本篇提供 jQuery 動畫效果的框架範例。

手工製作的推薦文章使得網站富有「人性」與「個性」 ! 

博客型態或是撰文論壇在於推薦文章或特殊廣告、公告的物件,經常採用浮動模組或是彈出小視窗的 JavaScript 特效。品牌企業因為目的性、用途的不同則少見這類設計,但近期一些創新品牌也開始使用 jQuery 動畫效果的「微互動」UX 設計趨勢,商務網站更是加強利用各式前端框架程式庫聚焦於產品當中;例如:jQuery、Bootstrap 等。

社群第三方插件 jQuery 動畫效果

Facebook 的文章推薦插件算是相當早推出的免費服務,其目的在於增加博客與社群平台的黏著性。另外有其他一些相關的服務提供此類功能。但如果想要獨推某些文章或某些產品頁面,就不能採用 RSS Feed 這類的資訊來源,或是以 Tags、程式算式自動抓取資訊,這樣處理太「直線」了。或許手工設計感的推薦 jQuery 動畫效果是另一種選擇,雖然會多花費一些心思。

Demo A

HTML 建構方式

Promotion 主體可以採用內嵌獨立頁面,或是併入網站架構當中。在運用上各有利弊,不同網站系統的處理亦有差異,所以我將範例檔案打包,請依照標注項目對照說明編號選取檔案。本篇僅提供有需要的網友索取密碼下載範例。

<!-- 1 - 1 (標注項目) -->

需要複製編輯的內容

<!-- End -->

內嵌獨立網頁

此方式適合了解檔案相對路徑的建制方法者,在更新宣傳物件時相當便利;也不必再度修改網站 HTML 構造。但內嵌網頁的方法不利於響應式網站設計上的表現,於是我做了響應式處理。

  • 1 – 1

先使用編輯器打開 Slide-box.html 檔案,它模擬網頁 jQuery 彈出動畫效果,無須上傳。jquery.js 版本修改成當前使用的 jquery 網址。

  • 1 – 2

複製該段 CSS 至網站 CSS 檔案裡面。

  • 1 – 3

複製該段內容至網頁 </body> 之前。Banner-A.html 網址依目錄位置變更為絕對路徑或相對路徑皆可。

  • 2 – 1

編輯 Banner-A.html,此處的 jquery.js 版本修改為 <!– 1 – 1 (標注項目) –> 的相同版本編號。由於內嵌網頁會重複載入 jQuery 函式庫,使用相同版本編號可加快處理速度。

  • 2 – 2

內有七組推薦目標,請修改網址與圖片、title、alt,需要更新時編輯此段即可。圖片尺寸為固定尺寸,請依照規格製作替換。

寫入網站 HTML 架構

此方式將所有內容一併寫入網頁架構中,可節省重複的 jQuery、Animation 開源碼等資源。如能製作成 php 檔案呼叫函式或 Shortcode 由控制台更新內容則相當便利;對於 XML 結構或直接寫入 HTML 結構中則略顯混亂。

  • 3 – 1

打開 Banner-basic.html,此檔案模擬網頁寫入 HTML 的方式,無須上傳。需使用 jQuery 程式庫。

  • 3 – 2

修改重點同 <!– 2 – 2 (標注項目) –>,並將標注項目內容含 script 全部複製。

動畫特效也有流行趨勢?

網頁中達成動態效果有幾種方式,例如 Flash、JavaScript、CSS、jQuery 函式運用等方式,但此類特效也有所謂的「時尚風格」。以往的網頁講究的是「完全利用」的概念,能多塞一點元素就盡量塞,能多點廣告宣傳機會便不會放過,所以在尺寸上很含蓄;深怕讀者被嚇跑。例如臉書的文章推薦外掛也是「不干擾」主體的作用而存在的。

個人觀點

彈出視窗或滑動效果在未來幾年有機會從配角變成主角。你可以預見動畫效果趨向明快的彈射方式以及 3D 轉場效果,你也可以看見更多「大得出奇」的彈出視窗問你要不要成為會員?又或是整個螢幕版面動態滑出一片的形象圖片而一句廢話都沒有﹍這種氣勢恢宏的布局讓小媳婦變身為武則天。

接下來的範例,當閱讀文章到盡頭時詢問讀者是否訂閱本站文章而滑出一片區域。在處理技巧上也能換成移到瀏覽器網址欄準備離開時出現,或是滑鼠經過某個特定區域時觸發。

Demo B

聚焦式推廣

  • 4 – 1

打開 Banner-promote.html,此檔案模擬廣告區滑出的方式,無須上傳。你的網頁需使用 jQuery 程式庫。

  • 4 – 2

複製標注區域內的樣式至網站 CSS 檔案。

  • 4 – 3

複製標注區域內的內容至網站 HTML 結構中,放置於頁腳即可。標的物件區域尺寸為 640 x 250 px。

jQuery 動畫效果

動畫特效的設計趨勢不是只要誇張,而是更加精心布局。一般 Slide Show 插件的設計無非是一幀又一幀的輪換效果,那麼試想放大版面的 Slide Show 除了畫面變大之外還有什麼創新?

答案是組合式的動態效果。
Demo B 只有單純的一張圖(懶得作複雜的範例),如果我將這張圖的區域替換成動畫效果或是輪播效果還是不夠。每一次的輪播畫面都是由幾個動態區域組成一個大而完整的「故事」才是充滿表情的動畫效果,這樣才不會大得「空虛」。

38
· ·