網路

用  ScrollMe.js 做滾動動畫

用 ScrollMe.js 做滾動動畫

我們在做一頁式的網頁時,由於內容都集中在同一頁,有時會被拉得太長。如果沒有做一些特別的處理,往往看起來會有點乏味,遇到這種情況我們通常會搭配一些 Scroll 的動畫效果來增加畫面的趣味,也就是當滑鼠滾動到頁面的某個區塊時,該區塊的元素會跑一些像是 Flash 的小動畫。但由於這些效果需要配合 Javascript,如果公司沒有配置前端工程師的話,設計師捧油們常常只能望效果興嘆。所幸,網路上已經有許多現成好用的套件可供大家選擇,像是之前我們介紹的 wow.js,或者今天要介紹的 ScrollMe.js,都可以很簡單的完成 Scroll Animation,下面是一個簡單的小教學,希望對大家有幫助。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。

10 個好用的 jQuery 外掛

一,Alton – jQuery Scrolling

透過滑鼠滾輪垂直切換頁面的區塊。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
Google VS 微軟,雲端郵件大比拼

Google VS 微軟,雲端郵件大比拼

記得曾經在網路上看過一個笑話:內容是要如何判斷一個人是否畢業?判斷的依據是看使用電子郵件的頻率,使用率高的是社會人士,使用率低的是學生。雖然這個說法有點粗糙,但某種程度來說也反映出企業對電子郵件的依賴,舉凡各種國內外商業書信的往來、產品型錄、訂單、估價單、合約書、員工休假、薪資條等等的確認,電子郵件都發揮了舉足輕重的功能。對企業來說,維持一套穩定的電子郵件系統,常常是 IT 們在公司裡最重要的日常工作。只是,自己維護一套電子郵件系統的成本所費不貲,軟硬體加維護的工程師,一年少說百來萬,沒有足夠的人、物力支援,會是很重的負擔,如果再遇到非預期的故障,更是會讓公司雞飛狗跳,輕則影響同事的辦公的效率,重則影響客戶對企業的印象,不可不慎重。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
如何在 WordPress 有新留言時,透過 Line 通知站長?

如何在 WordPress 有新留言時,透過 Line 通知站長?

當我們透過 WordPress 架設一個商業網站,隨著時間的推移會逐漸發現,維持一個網站日常的營運其實是件挺費心思的事。特別是台灣常見的中小企業,常常需要一個人扮演多個角色,很難專責請一個人來處理網站的各種問題,也無法時時刻刻注意網站上的留言。但對於商業類型的網站來說,這些來自顧客的留言可能非常重要,也許是顧客對產品的一些想法或疑問,也許是一些退換貨的訊息,不一而同,但類似的情境都急需站方在第一時間回覆,如果久未回覆,可能會影響客戶對產品的觀點,甚至拂袖而去再也不回來,這時我們該怎麼辦呢?

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
讓 Jetpack 支援 Line 分享

讓 Jetpack 支援 Line 分享

Jetpack 是一款由 WordPress 團隊開發的免費外掛,它將許多網站常見的功能集結起來,像是流量統計、圖片分流、防止垃圾訊息、自動更新、備份、社群分享等等…加上 WordPress 官方長期的維護,算是一款 WordPress 必備的外掛。但由於 WordPress 的開發來自國外,很多服務會以國外的優先,像是常見的分享按鈕,對台灣的使用者來說裡面有很多服務都相對陌生,反倒是市佔率很高的 Line 未列其中,這對以台灣為主要目標對象的經營者來說,會造成一點小困擾。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
初識 CSS 排版大師 Flexbox (一)

初識 CSS 排版大師 Flexbox (一)

在從 table 轉往 div 排版的過程中,編排一個需要彈性等高的田字形的 Layout,或是要將內容垂直置中,一定曾在某個時刻讓人心碎過。這種 Layout 用 table 很容易達成,但改成 DIV 的方式卻又很費心,甚至有時還得來點 JS 才能解決,對視覺設計師來說,實在很討厭。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
如何讓網頁上的錨點,產生平滑過渡的效果?

如何讓網頁上的錨點,產生平滑過渡的效果?

這幾年由於行動網頁的崛起,為了適應行動網頁以觸控為核心的瀏覽方式,在製作網頁的時候,會更傾向將過去分成數個頁面的網頁合併成單一頁面,讓使用者在一次的下載後,就看到完整的網站內容,減少在頁面切換時等待下載的時間。只是,這樣的做法也導致網頁長度的增加,使用者在尋找特定區塊的內容時,容易因為過長的頁面而迷失其中。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
網站 icon 生成器,一鍵通殺全平台。

網站 icon 生成器,一鍵通殺全平台。

記得早期做網頁的時候,在網站完成後會另外畫一個 16×16 的小 icon,這個小 icon 會出現在網址列及我的最愛中,取代瀏覽器原本的預設 icon,成為一點私人的小特色。但後來由於設備的發展一日千里,手機、平板、iOS、Android、MAC、Windows 等等,每種平台對這些小 icon 接受的大小、格式及規範都有些許不同,如果要個別針對這些平台去製作小 icon 變得有點麻煩,且不一定有相關的設備可以提供測試,這時,該怎麼辦呢?

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
Webfont 的思源黑體終於來了!

Webfont 的思源黑體終於來了!

先前我們介紹 Google Fonts 早鳥方案時,有提到 Google 目前有提供五套中文的 Webfont,當時還有點遺憾裡頭沒有大家注意許久的思源黑體。其實仔細想想,就會發覺標準版的思源黑體不太適合用在目前的網路環境中。因為光一組標準的思源黑體就有 15-16mb 大,如果還要考量提供不同粗細的字體時,字型下載可能就要佔去 40-50mb,以目前的網路條件來說的確有點過大。加上網站行動版本佔整體流量的比重越來越多,40-50mb 的下載量對行動網頁會是很大的負擔!畢竟不是每一位使用者的手機都採用不限流量的網路方案,字型大小與網路流量兩者間勢必要做一些取捨。

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
如何製作一個吸頂式的選單列

如何製作一個吸頂式的選單列

一個好用的選單系統,可以幫助使用者快速找到所需的內容,如果你經常觀察網頁的趨勢,因該很容易發現許多網站開始將選單列常駐在頁面的頂部,而不會隨著頁面的捲動而消失。這樣的做法可以幫助使用者在切換頁面單元時,不用為了點選選單而去捲動頁面,算是一個很貼心的 UX 規劃。做法也有很多種,從純粹的 CSS 到 Javascript 都有,網路上也有很多現成的範例,下面我們以 On Scroll Header Effects 為例:

每個人的生命都有一些重要的東西,對我而言,網路、單車、相機和繪畫一直在生命中的某些時刻扮演著重要的角色。我不明白老天爺是否要透過這些東西的集合告訴我什麼。只能努力地去串連這些看似無關的事物,並試著藉此為生活塗上一些屬於個人的顏色與符號。在自我追尋的同時,也期許能夠豐富這個世界。
1 of 4
1234