除了結合 HTML5 和 CSS3 可以實現這樣的動畫,也有很多優秀的外掛可以幫助你。下面給大家推薦12款最好的 jQuery 書頁翻轉(Flipbook)外掛。
1. Turn.js
Turn.js 是一個 JavaScript 庫,這將使你的內容看起來像一本真正的書或雜誌。Turn.js 是基於 HTML5 的雜誌,書籍或目錄的最佳選擇,只有15KB,適用於手機及平板電腦的瀏覽器,利用了硬體加速。
2. Flip Page
這個外掛用於實現影像的翻轉效果(2D 體驗的書頁翻轉) 。它利用了 HTML5 & CSS3 硬體加速和,也可以在移動瀏覽器中正常工作。
3. jFlip Plugin
這個外掛可以讓你把一個圖片庫做成一本書。您可以翻轉書頁來檢視下一張或上一張圖片。滑鼠懸停在畫廊的上的時候可以點選或拖動的動態的角落處進行翻頁。
4. Flip Counter
flipCounter 是一個 jQuery 外掛,讓枯燥的數字顯示變成一個大的,漂亮的翻頁動畫顯示。適合用於倒數計時,計數器等等。
5. Bookblock
BookBlock 是一個外掛,它可用於建立小冊子風格的元件,允許“翻頁”的導航。任何內容都可以使用,如影像或文字。外掛轉換隻在需要時使用了一些重疊的影子的頁面來建立更逼真的效果。
6. Flip
Flip 是一個 jQuery 外掛,讓你可以很容易的在四個方向翻轉你的元素。允許您定義要翻轉你的內容的方向,你也可以定義背景顏色,動畫的速度,並且它還支援 onAnimation 和 OnEnd 動畫中的給定時間的動畫執行。
7. Booklet
小冊子可能是這些外掛中選項最多的一個,因為它允許配置每個變數。頁面可以手動開啟,通過鍵盤,可以前後連結切換或者自動播放。
8. Portfolio Flipping Slider
這個翻轉滑塊外掛非常適合用於個人作品集的展示,這種翻轉效果是通過在使用者點選分頁觸發的。因此當使用者點選作品集中的影像時,圖片會翻轉360度,當其動畫近端影像會以全新的姿態改變。
9. imBookFlip
imBookFlip 外掛可以把一個 iframe 或直接在頁面上顯示的內容變成書本效果。它的頁面可以設定為開啟時,手動點選或作為自動播放,遺憾的是不支援頁面拖動。此外,它的 API 允許直接指向所需的頁面。
10. Flippy
Flippy 是一個輕量級的跨瀏覽器的 jQuery 翻頁效果外掛,它可以讓你翻轉你想要的任何 HTML 元素,值得一試。
11. QucikFlip2
QuickFlip 工作原理是利用動畫的快捷方式迅速翻轉 。同時允許翻頁效果平滑地與任何一塊標記,無論影像,背景或 CSS,此快捷鍵可以提高效能。
12. jQuery Notebook Page Flip Animation
這款奇特的 jQuery 筆記本外觀使用一個叫做 jQuery Booklet 的 jQuery 動畫外掛來實現逼真的書本效果。
本文連結:12 Best jQuery Flipbook Plugins for Developer