4/10/2018

製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

A+
bounce-button-call-to-action-css-animation.jpg-製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧最近接到一個需求,案主希望做一個固定在網頁右下角的按鈕。且為了引起訪客注意,指定這個按鈕必須上下不斷彈跳。

這樣的設計的確不錯,因為製作網頁的最終目的,就是讓訪客下定決心並且行動,無論目標是讓訪客購買產品、按讚、或留言聯繫等等,這個行為總稱「行動呼籲」,也就是 Call To Action(CTA)。

讓訪客行動的 CTA 按鈕,站長們需要好好花心思設計,例如尺寸要夠大、顏色夠搶眼,才不會目標族群(Target Audience)想行動時,卻找不到按鈕。

而下面這個依本篇需求做出的上下晃動按鈕,也會是 CTA 按鈕很好的範例:




(圖片出處: pixabay.com)


一、彈跳按鈕效果


1. 到達頁(Landing Page)範例

bounce-button-call-to-action-css-animation-1.jpg-製作會上下彈跳的按鈕,吸引訪客注意也增加點擊的機率﹍CSS 動畫技巧

上圖是一個到達頁範例,銷售頁面最重要的行動呼籲按鈕,從上圖靜態畫面或許沒有十分明顯。不過如果進入該頁面:


就會看到「登錄診所」按鈕會上下緩慢飄動,真正的顧客絕對會注意到並點擊。


2. 各種彈跳效果

這篇文章介紹了一個整理好的動畫效果庫 animate.css :


只要引用這個 CSS 外連,就有 75 種動畫效果可使用。文章也做了一張動畫效果預覽圖,可快速找到需要的效果來引用。

如果覺得閱讀說明書很麻煩,也可參考以下 WFU 整理的程式碼,不用外掛、使用簡單的 CSS 語法就可做出本篇範例的彈跳效果。



二、範例程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。


1. CSS

請到後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
@keyframes bounce{from{transform:translateY(0px)}to{transform:translateY(-10px)}}
@-webkit-keyframes bounce{from{transform:translateY(0px)}to{transform:translateY(-10px)}}
.bounce {animation: bounce 1s infinite alternate;-webkit-animation: bounce 1s infinite alternate;}
</style>

  • 10px 為彈跳的幅度 ,可修改兩處 10px 的數值
  • 1s 代表循環的時間為 1 秒,可修改兩處 1s 數值


2. HTML

接著在任何想要顯示上下彈跳按鈕的地方,使用以下 HTML 碼:

<img class="bounce" src="填入圖片網址"/>
如果不是使用圖片 IMG 標籤,請記得把使用的 HTML 標籤加上 class="bounce" 才會產生作用。

效果大致像下面這個按鈕:




三、補充說明


開頭有提到客戶希望這個按鈕固定在網頁右下角,這個效果用 CSS 語法就可做到,請讀者參考這篇「快速回到網頁上方 Go Top 按鈕 + 各種動畫效果」,自行修改 CSS 參數即可。


更多 CSS 相關技巧:
如這篇文章對你有幫助,歡迎「分享」或給我個讚:

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP