Next Stop

這次的網頁Demo為網站滿版影片的基本設置。
出門在外一直沒有好好養成拍影片的好習慣,找了很久~很久~終於找到年輕時到泰國旅行的一段美功鐵道市集影片。
於是便以此為題,加入照片作成一份小小的回憶錄,同時練習程式的撰寫與應用XD
贅言
原先影片單純以video元素寫在html中,在localhost測試時玩得很開心..online之後影片就像跑到蟲洞旅行了..等再次見到它時已經過了好一陣子(約2MB大小也是差不多情形~)。因此還是開了外掛tubular,先將影片上傳到YouTube再使用就順多了XD
在後頭有一段美功河夜訪螢火蟲的情境示意小動畫,當時這段歷程沒有拍攝下來,因此另外找了一段Creative Commons Zero影片擷取影格(frame)制成動畫,搭配文字敘述,請觀者自行腦補好惹~(被毆)
PS 因為是參考畫面,與現場實景還是不一樣的哦~
最後則是一個相簿小程式的制作,將游標移至照片列表右方手指的圖示即可捲動觀看其它照片,考量網頁載入速度以及避免使用者cache檔案體積太大,將照片都稍微壓縮過 : )

PC版網址:https://www.high5idea.com/demo/Memories_of_Thailand/
Mobile版網址:https://www.high5idea.com/demo/Memories_of_Thailand_mobile/   //程式將依使用裝置自動導向對應的版本。

Next Stop
丹嫩莎朵Damnoen Saduak與安帕瓦Amphawa水上市場
翻牌三招
第 1 招:將游標停留在任何一張卡片上,即可翻轉背面照片。
第 2 招:一整排出去。
第 3 招:然後再一整排回來XDD
Next Stop
螢火蟲純參考圖
傍晚的安帕瓦(Amphawa)水上市場已漲潮至高水位,
此時乘船夜遊,沿岸家戶紛紛點燈,幾位婦人在河邊洗頭或洗菜淘米、大叔在釣魚、少年少女在屋內看電視。
在美功河(Mae Klong)河道航行約20分鐘後,駛入紅樹林深處,四周團團螢火蟲忽明忽滅、映入眼簾、目不暇給---
Next Stop
手動播放的電視機

在滑鼠滾輪小動畫的部份也另外又製作了一個火車版。
將游標移至左方電視機區域,
向上、向下滾動滑鼠/觸控板即可控制火車行進方向。
可以前進,也可以後退,還可以跳恰恰~~~
Next Stop