採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
December 13, 2018
到現在為止大多以FLASH來製作這類的說明動畫，但是FLASH卻只能停在原有的技術，實在可惜。甚至在手機上無法直接執行，Android 需要另外下載.APK，Apple手機則是無法執行FLASH。始初想到如果能使用GIF的動畫的話，檔案又不要太大的話，就十分有可能可以克服這個門檻，在讀書會中工程師們不斷絞盡腦汁，利用可能的技術，來取代逐漸被新技術淡忘的FLASH，簡單的說就是結合以下技術：
HTML5：網頁架構
GIF：動畫
CSS3：動畫移動或切換
JavaScript：場面切換與選擇
Webstorage：記憶使用者故事路線
來試圖做出類似繪本的網頁，甚至能夠比FLASH還要更小的傳輸檔案量。
▼解說伊比力斯（癲癇）與進入親善系統
▼可進入「巴士」「MRT」「學校」等三個背景環境
HTML5：網頁架構
GIF：動畫
CSS3：動畫移動或切換
JavaScript：場面切換與選擇
Webstorage：記憶使用者故事路線
來試圖做出類似繪本的網頁，甚至能夠比FLASH還要更小的傳輸檔案量。
▼解說伊比力斯（癲癇）與進入親善系統
▼可進入「巴士」「MRT」「學校」等三個背景環境
July 25, 2018
跟工程師討論後，他想要使用JavaScript來呈現動畫效果，我也有另外一套方式，將在行進中的動畫改變成不同圖片的方式，來呈現左右不同方向行進時的動畫。JS可以計算到兩個物件的相對位置（碰撞與否），但CSS僅能計算單一物件的動作。重點是...會走路又能適當的時間改變方向的狗狗，可愛吧？！
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
▼這一個連貫的動作，由三張GIF所組合而成（因連動手機版版面限制。1.向右走至200px，2.向左走至0px，3.到原點踏步）
