• A-Fu Design
  • 前端設計
    • jQuery 套件
    • HTML 5
  • 關於A-Fu
  • 隱私權政策
  • 聯絡A-Fu
Google+ facebook twitter

A-Fu Design

A-Fu Design

ScrollUp 實際執行畫面
ScrollUp 是一個輕量級的 jQuery 套件,可輕鬆簡單的讓任何的網站建立一個自定義的滑動到網頁頂端的功能,如果網站或文章的長度超過了一個視覺的長度,讓使用者慢慢地滑回最上方實在是很不方便,所以有這樣一個方便的套件,讓使用者按一下畫面就會慢慢地滑上頂端,使用者馬上就可以執行他蝦一個想看的選項。
Share
Tweet
Pin
Share
No 意見
Lazy Load 網頁圖片延遲加載
Lazy Load 當你的網站上有很多商品圖片的時候,會開始慢慢地感覺到進入網站的速度是越來越慢,而這一個套件主要是先讓網頁加載非圖片的靜態檔案,當使用者開始做向下瀏覽的時候才開始加載網站的圖片,對於有比較多圖片的網頁使用延遲加載的功能,能夠很有效的提高網頁本身的顯示速度,基於 jQuery 框架對於開發網站其他功能也很方便。
Share
Tweet
Pin
Share
No 意見
Background image tweening with jQuery 背景圖片轉換中 A-Fu Design
Background image tweening with jQuery 背景圖片轉換中
Background image tweening with jQuery 一個體積小使用非常簡單方便的背景變換套件,基於 jQuery 框架開發能夠保持 DOM 整潔並且有平滑的過度動畫效果。能夠展示圖片又不影響到其他的網頁元素動作,大多用於網頁最上方橫幅圖片展示。
Share
Tweet
Pin
Share
No 意見
Animated Scroll to Top 以動畫方式移動到最頂端 A-Fu Design
Animated Scroll to Top 以動畫方式移動到最頂端
Animated Scroll to Top 以動畫方式移動到最頂端,當頁面的滾到條滾到一定的位置的時候,將會顯示出一個向上的按鈕,點擊該按鈕畫面就會慢慢地向上滾動。這是一個利用了 jQuery 框架實作的一個自動滾到到頁面頂部的一個套件。
Share
Tweet
Pin
Share
No 意見
Create a Realistic Hover Effect With jQuery 動態選單 A-Fu Design
Create a Realistic Hover Effect With jQuery 動態選單
Create a Realistic Hover Effect With jQuery 利用 jQuery 框架和 jQuery UI 配合,為一組圖標連結加入當滑鼠移過時,圖標會產生上升以及倒影的效果。就像是 Mac 系統中的選單 dock 的類似樣式,在網頁上適合當主要的功能選單提供給使用者炫麗的效果。
Share
Tweet
Pin
Share
No 意見
QuickFlip2 網頁元素翻頁效果 A-Fu Design
QuickFlip2 網頁元素翻頁效果
QuickFlip2 是一個可以讓任何的 HTML 元素標籤產生類似卡片翻轉效果的一個 jQuery 框架套件,看起來的效果就像是在 Apple iPhone 上的 UI 動畫一樣。可讓一些不太重要的資訊顯示於背面,當使用者有需要的時候才去點擊翻到背面去查看內容,也同時省下了很多的網頁空間可以拿來放置更多對網站有用的資訊。
Share
Tweet
Pin
Share
No 意見
jRumble 讓網頁元素有震動效果 A-Fu Design
jRumble 讓網頁元素有震動效果
jRumble 是一個可以讓網頁上的任何元素產生抖動、震動、搖動特效,可設定多種的方法來產生動畫的特效,使用這些特效的目的是希望可以更加吸引使用者能夠很快的注意到這一個網頁元素。jRumble 基於 jQuery 框架製作可以讓開發者更加容易地為網頁元素增加方法來執行 jRumble 的動畫效果,也因為是使用到了 jQuery 框架,所以對大部分瀏覽器都是有支援的。
Share
Tweet
Pin
Share
No 意見
3D Thumbnail hover effects 圖片 3D 動畫摺疊效果 A-Fu Design
3D Thumbnail hover effects 圖片 3D 動畫摺疊效果
3D Thumbnail hover effects 滑鼠滑過圖片的所發生的 3D 動畫摺疊效果,建立一個結構將允許我們使用 jQuery 框架使圖片顯示為摺疊或者是彎曲,當使用者的滑鼠滑過時,使用 CSS3 和 jQuery 讓圖片產生 3D 的變化效果。這一個範例因為是使用 CSS3 ,所以並不支援對 CSS3 沒有支援的 IE10 以下的瀏覽器並不支援。
Share
Tweet
Pin
Share
No 意見
diagonalFade 實際執行畫面 A-Fu Design
diagonalFade 實際執行畫面
diagonalFade 是一個 jQuery 框架下的套件,這一個套件主要的功能是讓你能夠輕鬆的使網頁元素能夠朝指定方向淡入淡出,你所要做的事情只有指定項目組所在的容器,然後指定他的元素和淡入或淡出以及他的方向。適用於現在大部分的瀏覽器之上。
Share
Tweet
Pin
Share
No 意見
jqFloat.js 實際執行畫面 A-Fu網頁設計
jqFloat.js 實際執行畫面
jqFloat.js 是一個可以讓您的 HTTML 網頁元素似乎是 " 浮 " 在你的頁面上,他可以幫助您創建簡單的浮動動畫效果,讓您的網站有很多的小動畫進行。 jqFloat.js 採用 jQuery 框架製作能夠增加更多的套件來使用。
Share
Tweet
Pin
Share
No 意見
animationBG 實際執行畫面 A-Fu網頁設計
animationBG 實際執行畫面
animationBG ( cool background animation ) 利用 jQuery 框架,讓網頁上出現一個非常酷的網頁背景動畫,只要滑鼠滑過即能看到背景左右晃動還能自行分割段落,可呈現多段的動畫並非全畫面同一時間動作。
Share
Tweet
Pin
Share
No 意見
Flippage 實際翻頁中畫面 A-Fu網頁設計
Flippage 實際翻頁中畫面
Flippage 可以將網頁的 div 元素內容轉換為可以翻頁的書籍樣式,也可以作用在觸控裝置上讓使用者又真正在看書翻頁的感覺。
Share
Tweet
Pin
Share
No 意見
jSlideto 高亮範圍畫面 A-Fu 網頁設計
jSlideto 高亮範圍畫面
如果在同一個網頁上面有太多太多的內容,可能上面會有標題再來用書籤方式做當前頁面的連結,jSlideto 這一個套件可以讓書籤的功能有趣一點,以滑動動畫的方式移到書籤的目標段落,然後再把該段落以開發者配置的顏色做成高亮提示,讓使用者可以清楚的知道該標題的文章範圍。
Share
Tweet
Pin
Share
No 意見
Spin.js 實際執行畫面 A-Fu網頁設計
Spin.js 實際執行畫面
現在網頁設計上,常常都會使用到 AJAX 來做異步的存取,在作用當中想讓使用者知道在讀取中大部分的人都會使用到圖片。然而這一支程式的不是用圖片來完成這一個提示的動作,是使用 CSS3 來渲染使用者的介面,當瀏覽器不支援時會改採用 VML 的方式來產生。不需要圖片也沒有外部的 CSS 檔案,不依賴框架。相容於 IE6 以上版本,相當於相容於近代所有瀏覽器,檔案大小僅 4.11 KB 比一個 GIF 的動畫圖片還小。
Share
Tweet
Pin
Share
No 意見
Older Posts

About me

還在努力掙扎中的工程師

Follow Us

  • Google+
  • facebook
  • twitter

Categories

Accordion Animation AutoComplete CSS Calendar Canvas Carousel Charts Color DatePicker Effects Facebook API Forms Gallery HTML5 Menu Mootools Prototype React images jQuery javascripts lightbox 前端技術 統計圖表 網頁設計

Recent Posts

  • Security Eye 4.4.1 免費網路攝影機監視系統,多路監視器解決方案
  • PotPlayer 1.7.16291 繁體中文免安裝,新增串流媒體播放的 MP4 格式
  • 微軟推出 Font Maker 製作自己專屬 「手寫字型」
  • jQuery Gantt Chart 在網頁上繪製甘特圖的 jQuery 套件
  • Kalendae 一個不依賴任何框架的日期選擇器

Sponsor


勸敗攻略
勸敗分部

Facebook

Blog Archive

  • 6月 2026 (27)
  • 5月 2026 (60)
  • 4月 2026 (58)
  • 3月 2026 (62)
  • 2月 2026 (55)
  • 1月 2026 (62)
  • 12月 2025 (62)
  • 11月 2025 (58)
  • 10月 2025 (62)
  • 9月 2025 (60)
  • 8月 2025 (62)
  • 7月 2025 (62)
  • 6月 2025 (58)
  • 4月 2025 (48)
  • 3月 2025 (60)
  • 2月 2025 (51)
  • 1月 2025 (56)
  • 12月 2024 (61)
  • 11月 2024 (60)
  • 10月 2024 (54)
  • 9月 2024 (55)
  • 8月 2024 (42)
  • 7月 2024 (40)
  • 6月 2024 (19)
  • 9月 2023 (3)
  • 4月 2023 (2)
  • 2月 2023 (1)
  • 12月 2021 (1)
  • 1月 2019 (11)
  • 12月 2018 (31)
  • 11月 2018 (31)
  • 10月 2018 (31)
  • 9月 2018 (30)
  • 8月 2018 (31)
  • 7月 2018 (3)
  • 2月 2018 (1)
  • 4月 2015 (1)
  • 9月 2014 (1)
  • 2月 2014 (1)
  • 7月 2013 (1)
  • 2月 2013 (2)
  • 1月 2013 (1)
  • 12月 2012 (12)
  • 11月 2012 (81)
  • 10月 2012 (64)

Created with by ThemeXpose | Distributed by Blogger Templates