Bootstrap進階五:Web開發中很實用的交互效果積累


1.頁面切換效果

我們已經在示例中羅列了一組動畫,可以被應用到頁面切換過程中,創造出很有趣的導航效果。

2.視差滾動(parallax-slider)

視差滾動(parallax-slider)已經被廣泛應用於網頁設計中,這種技術能夠讓原本平面的網頁界面產生動感的立體效果。

3.側欄動畫效果

以細微的過渡動畫顯示一些隱藏的側邊欄,其余的內容也是。通常側邊欄滑入,把其他內容推到一邊。這個可過程中可以加入很多微妙而奇特的效果。

4.Slicebox - 3D 圖片滑塊效果

使用 CSS3 的3D變換特性,我們可以通過讓元素在三維空間中變換來實現一些新奇的效果。 這篇文章分享的這款 jQuery 立體圖片滑塊插件,利用了 3D transforms(變換)屬性來實現多種不同的效果。

5.單元素實現的 CSS 加載進度提示效果

之前的文章個大家分享過各種類型的加載效果(Loading Effects),這里再給大家奉獻一組基於單個元素實現的 CSS 加載動畫集合。這些加載效果都是基於一個 DIV 元素實現的,十分強悍。

6.動感的頁面加載動畫效果

這個效果的核心是讓一個形狀在頁面窗口中動畫顯示並有展示活動的指示。當新內容被加載時,形狀將以動畫顯示返回顯示的頁面。我們將使用 Snap.svg 動畫庫來實現,因為這個庫讓我們能夠創建復雜的形狀和有趣的變形轉換效果。

7.奇特的網格加載效果

向您展示了如何使用 Masonry 網格砌體插件,結合 CSS 動畫重現這種效果。另外在這里,我們還借助了 ColorFinder 來獲得的圖像的最突出的顏色來作為初始的加載背景色使用。

8.使用 CSS3 制作網格動畫效果

今天我們想與大家分享一個小的動畫概念。這個夢幻般的效果是在馬庫斯·埃克特的原型應用程序里發現的 。實現的基本思路是對網格項目進行 3D 旋轉,擴展成全屏,並呈現內容。

9.HTML5模擬現實物理效果

Ball Pool 是一個基於 HTML5 技術的實驗,模擬現實物理效果,讓你在 Web 中感受自然物體的運動。玩法介紹:可以隨意拖動圓球、點擊頁面背景、晃動瀏覽器、雙擊頁面背景或者按住鼠標左鍵,有不同的效果,趕緊來體驗一下。

10.實現各種CSS3文本動畫效果

這個插件集成了一些非常好的 JavaScript 庫,提供一個方便使用的文本動畫插件,可以讓你為網頁中的文字運用各種動畫。

11.離開你網站時顯示模態彈窗

Ouibounce 是一個微小的庫,用於實現在用戶離開你的網站的時候顯示一個模式窗口。這個庫可以幫助你增加着陸頁的轉換率。 Ouibounce 會在當鼠標光標移動到接近(或通過)視口(viewport)的頂部的時候觸發

12.實現各種好看的陰影效果

Shine.js 是一個用於實現漂亮陰影的 JavaScript 庫。您可以設置動態光的位置,可定制的陰影。不依賴於第三方庫,兼容 AMD。能在支持 textShadow 或 boxShadow 的瀏覽器中正常使用,如果有需要會自動添加前綴。

13.表單填寫進度提示效果

Fort.js 是一款用於時尚、現代的表單填寫進度提示效果的 JavaScript 庫,你需要做的就是添加表單,剩下的任務就交給 Fort.js 算法了,使用非常簡單。提供了Default、Gradient、Sections 以及 Flash 四種效果,滿足開發的各種場合需要。

14.HTML5 WebGL 實現逼真的雲朵效果

使用 HTML5 WebGL 實現超逼真的雲朵效果。WebGL 是一項在網頁瀏覽器呈現3D畫面的技術,有別於過去需要安裝瀏覽器插件,通過 WebGL 的技術,只需要編寫網頁代碼即可實現3D圖像的展示。

15.帶有數字顯示的加載進度條效果

有的時候,在我們的應用程序中,我們希望能夠顯示特定任務的百分比進度。這里分享的這款小巧的 JavaScript 插件就是實現這個功能,易於使用和定制,而且是是免費開源的。

16.自適應的占位符效果

在早期,我們都是通過使用 JavaScript 來實現占位符功能。而現在,HTML5 原生提供的 placeholder 屬性讓我們在現代瀏覽器輕松就能實現這樣的功能。這里向大家分享一個自適應的占位符效果(Adaptive Placeholder),當你輸入的時候,提示文字不會消失,而是以動畫的方式移動到了輸入框的上方。

17.WOW.js – 在頁面滾動時展現動感的元素動畫效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM