JavaScript

首頁 » JavaScript

Uiball.com 免費使用 CSS 打造的網頁等待動畫圖示

Uiball.com 免費使用 CSS 打造的網頁等待動畫圖示

瀏覽網頁之所以會覺得網站可能沒有回應,原因有可能出在網頁需要運算時間較久、網路傳輸速率較慢或的數據過多...等等,總之,在這之前如果適時地放上一個等待圖示或是加載中,請稍後...的字樣,都比讓用戶空等帶來的好,如果是要放等待動畫圖示,GIF 是個選擇,而另一選擇則是使用 CSS,Uiball.com 這個網站提供 24個以 CSS 打造的等動畫圖示,喜患的就可以直接複製其 html 與 css語法,直接放到想要顯示的位置即可。

24個純 CSS 打造的等待動畫圖示 隨取即用

24個純 CSS 打造的等待動畫圖示 隨取即用

網頁處理、運算、傳輸都需要時間,如果讓使用者乾等待,就容易產生當機的錯覺,因此,在這段時間產生一個提示訊息藉此告訴使用者耐心等待是有必要的,而現行網頁最常見的就是使用等待動畫圖示,負責處理到呈現這段時間的呈現,這個動畫可以使用 GIF 圖檔,也可以使用純 CSS 語法打造,24 PURE CSS3 PRELOADERS 這個網站展示了 24個純 CSS 等待動畫圖示,只需在網頁中引用該 CSS 檔案,就可輕易實現等待中使用動畫圖示來提示。

Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

Loaders 讓瀏覽者在等待網頁載入的同時出現動畫圖示

網頁在呈現之前是需要運算及傳輸時間的,如果可以在這個等待時間加入一個進度條,讓瀏覽者知道還要等多久,會是較理想的網頁設計,但進度條的準確度會受到很多條件的限制,因此,大部分的網頁都是提供一個等待圖示動畫,藉此提示瀏覽者,不需要有多餘的動作靜待網頁呈現。以往要加入此類的等待圖示動畫,我們會使用 Gif 圖檔,而現在我們可以更方便的使用 JavaScript 或是純 CSS 就能加入,Loaders 這個網站提供獨特且具有質感的 24個免費 loader ICON,每個均提供 REACT、HTML 及 CSS 原始碼,讓網頁設計使用 loader ICON可以更方便且有更多選擇。

線上 HTML、CSS、JavaScript 程式碼產生器,超多範例語法

線上 HTML、CSS、JavaScript 程式碼產生器,超多範例語法

網頁要碰到的技術,基礎大概有 HTML、CSS、JavaScript 等程式語法,對初學者而言,最快的上手方式,當然就是多參考別人寫的語法,什麼樣的效果搭配什麼樣的語法,Free Online HTML Code Generator CSS Code Generator JavaScript Code Generator 這個網站在 HTML、CSS、JavaScript、JQuery 四種語言,提供網頁常用物件像是 table、dropdown、iFrame、textbox、radio button、button...等等的語法產生器,透過參數的調整,就能取得該效果的相對應的語法,讓你馬上就能套用到網頁內,這對於還不熟或初學者來說,可說是最佳好幫手。

CDNJS 網站開發資源託管免費服務 CDN

CDNJS 網站開發資源託管免費服務 CDN

網站開發免不了都要使用到 JavaScript、CSS、SWF、images 等專屬前端網頁的開發應用,例如 JQuery 程式庫,若自己的網站流量夠大,當然可以將其下載到自己網站上來應用,若想節省自身網站的流量,也可以在網頁裡直接引用有提供 CDN 的網站上的程式庫,像是 Google CDN 或是 Microsoft runs their own CDN,若在前述兩個網站上找不到要應用的資源,可以到 CDNJS 網站上找找看,其穩定性與效能也還算不錯喔。

Hi Slider - JQuery 相片展示產生器

Hi Slider - JQuery 相片展示產生器

想要在網頁上面利用 JQuery 來展示多張圖片,通常需要了解 JavaScript、JQuery、CSS 等多種語法,更快速的方法,可以去參考別人寫好的 Code 來依樣畫葫蘆,若還覺得麻煩,那就來使用 Hi Slider 這套可個人免費使用的 JQuery 相片展示產生器,多種展示模型框、相片間轉場效果、展示尺寸......均可讓你自行選擇,而且無廣告、水印,只要使用滑鼠便可輕鬆做出在具有高水準的相片展示網頁。

 訂閱/追蹤

 站內搜尋

˄