Animate.css 讓菜鳥走路也有風！

-
最近寫了一些 CSS 的排版練習，實在很肖想能做一些前端的動態效果。但在 CSS 和 JavaScript 功力都還很菜的情況下該怎麼達成願望呢？嗯......那就直接套用大神寫好的效果吧！🤪 這個 Animate.css 是寫 AC My Hero Page 作業時發現的，最初其實是很想要試試看「點擊 "Save the World" 按鈕後鋼鐵人小圖晃動」這樣的效果。也確實有找到一個 JavaScript 寫法，其中模仿 QQ 聊天的抖動很類似我想要的，只是現在的功力真的菜到就連撿到現成的都還動不起來，胡亂研究一陣子後還是只能先暫時放棄。也因為這樣，這才發現了由 Daniel Eden 所開發的 Animate.css。


Animate.css 目前共有 16 個不同大主題的 CSS3 動畫效果，我們只需要事先在 html 的 <head> 中引入 Animate.css 的樣式檔，接著在想增加動畫效果的 html 標籤上設定相對應 class，即可輕輕鬆鬆擁有想要的動畫！

Step 1. 設定 Animate.css 樣式檔

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>

Step 2. 設定相對應 class
例如我想要將 tada 這個效果加在鋼鐵人小圖上，就在 <img> 標籤加上如下 "animated infinite tada" 的 class。

<div class="sticker">
<img class="animated infinite tada" src="https://i.imgur.com/WAtkuLN.png" alt="Iron Man">
</div>

  • animated → 動畫
  • infinite → 無限循環，這個屬性也可以再更細緻地調整。
  • tada → Animate.css 的動畫效果名稱，想要別的動畫效果換掉這個即可。

做出來的效果就像這樣

See the Pen WI-S2L4 Assignment Iron Man by Hailey Lin (@hanpig) on CodePen.


Step 3. 將動畫效果調整地更細緻
若不希望動畫無限播放，也可以拿掉 infinite、更進一步增加 style，比如我想要單次動畫 9 秒的時間、只能重播動畫 9 次：

<div class="sticker">
<img class="animated tada" style="animation-duration: 9s;animation-iteration-count:9" src="https://i.imgur.com/WAtkuLN.png" alt="Iron Man">
</div>

  • animation-duration → 控制單次動畫的時間長度
  • animation-iteration-count → 控制動畫重播的次數

最後，寫 My Hero Page 時還另外學到了「點擊按鈕後顯示 alert 訊息」的 html 語法 → onclick= " alert ( '訊息內容') "。
 
<button style="cursor: pointer" class="button" onclick="alert('YOU Saved the World！Good Job！💪💪💪')">Save the World</button>



留言

張貼留言

這個網誌中的熱門文章

如何在 Blogger 文章中顯示程式碼區塊？

-
圖片
最近在學習新的技能，各種筆記整理將會是一個成敗關鍵，而且有時也會想要對 Blogger 做一點樣式上的調整。像是之前調整 Blogger 字型後，留言板就壞了；還有這個版型的精選文章不要在單篇文章出現等問題，花了好幾天 Google 到解法，但沒有好好寫筆記，現在就完全想不起來是動到什麼、調整了什麼才變好的（攤手）。Anyway，最近也感受到「發表部落格文章」和「寫在自己的本機 / 紙本筆記本」威力不同，明明本質上都是「筆記」，會有這種差異真的好神奇啊！ 總之這篇想來暖暖手、紀錄一下：撰寫 Blogger 文章時，怎樣才能在版面中顯示程式碼區塊？ — 我是照著 Wei 的 Blogger 閱讀記事：「 應用 Google Code Prettify在 blogger 中顯示程式 」這篇文章的引導完成任務的，筆記也是參照這篇文章所整理唷！ 筆記開始 預設程式碼區塊設置 在 Blogger 管理介面中，點擊「版面配置」。 在「版面配置」頁中的「側欄（底部）」點擊「新增小工具」後顯示 popup。 在 popup 上點擊加入「HTML / JavaScript」： 將顯示「HTML / JavaScript」checkbox 打勾。 標題的部分可不填。 內容的部分貼上 Google Code Prettify 的程式碼如下： <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"> 按下儲存後將這個版面配置排在「側欄（底部）」中的最後一個。 完成 🙂 接下來在 Blogger 寫文章時使用這個語法吧！ 先將想放在文內的程式碼複製起來貼到  HTML 編碼器中 。 接著將 Blogger 編輯器切換為 HTML 編輯模式，在文內貼上以下程式碼，並將 ... 中的內容換成 HTML 編碼器轉換過的內容。 <pre class="prettyprint linenums">...</pre> 文章應該有順利產生程式碼區塊了吧 :) 不喜歡預設程式碼區塊的白底？為什麼不是黑色背景的？ 在 Prettify Themes Gallery 選一個喜歡的樣式 如：想套用 Sunburst
閱讀完整內容

邊緣人的終極密碼 —JavaScript 程式入門經典練習題「猜數字猜到飽」

-
圖片
這幾天在寫 JavaScript 的程式入門經典練習題 —「猜數字」，概念有點像是小時候會和朋友一起玩的「終極密碼」，不過印象中大家都是避免猜到指定數字，因為誰也不想「中獎後」自己變成大家的禮物 — 表演助興娛樂眾人。另外，過往玩終極密碼時，大家總得輪流當指定數字的莊家負責主持，如果會寫這支小遊戲那就沒有這問題了，所有計算與主持都可以交給程式，回回每個人都能同樂。But... 本人還無法生出前端介面讓用戶輸入數字，目前只練習到讓「電腦邊緣人自己猜數字」而且已覺得小有難度，還有非 ~ 常~ 遠的路要走阿。（握拳） 玩終極密碼時，大致上可分為兩種類型的玩家。一是天真派的佛系玩家，對於莊家提示都當耳邊風，只隨自己心意隨意喊數，不會細想或有更多安排。第二種則是小聰明玩家，運用莊家給的資訊，快速縮小猜數範圍，並一步步「幫助其他玩家」 步入陷阱之中 。（喂） 我們的練習也分成兩個階段，本次先記錄「佛系玩家」的練習，已將 AC 助教和同學針對我的程式碼之回饋整理如下： 第 4 行已宣告變數 guess = 0，while 迴圈內的 let guess 就不用再次宣告了，賦值即可。 第 14 行的 while 迴圈只在 guess 不等於 answer 的情況下執行，也就是 guess 等於 answer 時（第 20 行的 IF 條件式成立時）迴圈就會自動結束，而且外層也已宣告過 guess 因此不需要第 22 行的 break 來中斷迴圈。 → 之前一直搞不懂為何 break 和外層宣告的 guess 有關？文章寫著想著，過了很久以後終於想通！（ 到底為何不用 break？👉 筆記傳送門 ） 因為 PM 這個職務總是得要想很多  我習慣把盤到的所有狀況都列出來（第 25 行的 else if），不過 RD 通常在開發時最後一個會直接寫 else。 完整程式碼 Repl.it URL 接著是寫作業時產生的一些 碎碎念 筆記。 猜數字遊戲需求描述 莊家事先指定介於 1-100 之間的數字（這裡由邊緣人電腦隨機指定 XD） 佛系玩家們輪流開始猜數字（這裡繼續由邊緣人電腦一機分飾多角 XD） 玩家隨意喊出數字以後，莊家回答「太小了」或「太大了」。 直到玩家猜中，遊戲結束。 Pseudocode and Flowchart 開始寫程式！ Step 1. 設計變數 const answe
閱讀完整內容

排球少年山口忠：平凡的我們也能威力十足

-
圖片
如果說「知否？知否？應是綠肥紅瘦」是我這幾年最喜歡的連續劇，那「排球少年」就是我最喜歡的動畫了。只要劇荒的時候，總會點開這兩部，百看不厭。而且回回看總是能帶來不同角度的思考，排球少年更是讓我又哭又笑，還能幫助低潮情緒注入元氣。 ※ 以下劇透，請慎入。 沒想到在本 Blog 第一個出場的排球少年居然會是「山口忠」（驚！！）。山口並非是個特別搶眼的角色，有的時候甚至會忘記這個人存在（喂）。在烏野第一場練習賽時（甚至是之後的每場球賽），四個一年級新生中有三人都被隊長大地排入了先發球員，唯獨山口被留在預備區。用同理心去想，其實還真有點讓人難過，會覺得自己遠遠被同輩拋在後面吧？但也沒辦法，畢竟自己不像好友月島天生長得特高又聰明（但山口其實也有 180cm），稍微努力就能有不錯的表現。也沒有天才影山或日向天生的運動細胞，而且兩人還無所不用其極的付出超過一百分的努力磨練自己的能力。山口忠，就像自己一樣，徹頭徹尾是個平凡、過去也沒際遇想要特別努力的普通人。 這樣的山口來到烏野高中後，認識了許多天生麗質卻仍特別努力的隊友。不斷思考自己能有什麼價值後，開始練習不太好揭起的跳躍漂浮發球，希望自己能成為在關鍵時刻替球隊搶分的代發球員。 山口前兩次被派上場很是驚慌失措、而且還逃避做了一般的發球。但他經過失敗經驗後不斷磨練自己，再次上場終於沉穩地替烏野連搶五分，也越來越有自信！這是在告訴我們十年磨一劍嗎（菸）？而且山口前兩次的代發經驗真的很慘烈啊，漫畫家古館春一先生存心想整他吧哈哈。看著這樣的山口，真的完全投射到現在自己身上，希望我也能熬到「跳躍漂浮球」練成的那一天。 かかって来い！！
閱讀完整內容