3D Exhibition

Concept

Inspired from Codrops – Experimental 3D Room Exhibition Layout, but added further more functions! Now you can click every single image to get closer to it, and also available to read description and story behind photos.

Design

Origin post from Codrops is use 3D room as background only, but today I make it more joyful to play around. By separating the .content into .content-top and .content-bottom, we are now able to click on images behind scene! Then, I reuse the .info element with dynamically loading HTML content, so every picture can get its own information written side by side.

Also, I simplify navigation arrows animation to make it less distraction from focusing at gallery, modify color transition to menu icons so get more natural behavior, and add left/right arrow keyboard navigation supported.

On mobile phone, you can even tilt the device to change viewing perspective of room to get more closer to photo you are interested.

Playground

Kotoba 和和字典

設計

後端基於CI的框架實作了一個日語字典網站,前端則運用MUI CSS實現Material Design的風格。註冊只需要使用者名稱,登入後可以把單字加入最愛,並且可以根據需求自行分類。歡迎大家進來玩玩~用手機的話還可以利用iOS的「加入主畫面」功能、或Android的「新增至主螢幕」功能,將網站設為常用桌面捷徑。

資料來源: weblio辞書

Go to page

待更新項目

  • 其他語言支援:英語、中文等
  • 更多個人化設定
  • PWA化

デザイン

バックエンドはCIに基づいてオンライン辞書を、フロントエンドはMUI CSSを基にしてMaterial Designを実装してみた。新規登録にUsernameだけ、登録したら、単語の管理や分類などをご自由に。よければ是非使ってみてください。携帯端末を利用する場合、iOSのSafari又はAndroidのChromeで「ホーム画面に追加」機能でショートカット作成することができる。

Hanabi

簡介

練習了JS對Canvas的操作,並且利用requestAnimationFrame以利瀏覽器以最大效能渲染煙火點。每一個產生的煙火約有500個煙火點,利用不斷堆疊的透明黑色,製造出殘影的效果。透過對煙火物件Property的改變,可以輕易達到改變顏色的效果。

在不同的參數設定下,意外產生出規律圖形。有一個如梅花般的效果,於是就保留下來了,有空會在新增更多的種類,並且為顏色做最佳化,有些色彩實在不像是煙火XD

玩法

  1. 選擇煙火種類,可用鍵盤數字選擇
  2. 用滑鼠左鍵綻放你的天空

Go to page

待更新項目:

  • 將陸續增加煙火種類,並且預訂新增背景。

JapanEx 制縣傳說

來由

始祖経県値用了Flash技術將日本依據個人的旅遊程度上色,不過輸入方式是最原始的HTML Input元素,不僅難以填寫並且缺乏直觀的地理位置概念,此外Flash早已被各大瀏覽器給放棄使用。我第一次知道這個遊戲是在IG貼文上看到,發現是這個Android App,但無奈我用的是iPhone不能玩,於是心血來潮用SVG自己做一個。

設計

先在Illustrator把日本的圖形畫好之後,每個形狀會帶入圖層名稱作為其ID的標籤,於是就可以在HTML裡被使用。多國語言有搭配Vue.js的Template做樣板,動態載入翻譯文字。

至於計分數的方法,考量到分享的用途,又不想大費周章使用資料庫,於是就索性全部塞在網址裡了XD 缺點就是網址變太長,有點醜就是了。

玩法

  1. 按一下曾到訪過的地區,選擇符合的選項,朝向把47個都道府縣都收集滿的等級235吧!
  2. 可以分享到Facebook上,或者自行保存下來,還可以增加客製化的簽名檔喔。

2018.09.18 更新:

  1. 新增英文版

2018.05.30 更新:

  1. 縣名更正
  2. 所屬地區修正

其他地區版本

感謝熱心的網友們,把日本以外的地區完成,讓我們一起來製作專屬於自己的地圖吧!

台灣:https://travel.tonypai.com.tw/
香港:http://www.thelittleprince.hk/hongkong/

Solar System

1969年阿姆斯壯搭乘美國阿波羅11號登陸月球,現在,你可以透過手機裡的瀏覽器,前往太陽系的每一個角落。針對地球,甚至看得到燈火通明的夜晚!我們不必成為太空人,就能上太空看地球。

設計

利用了開學前的寒假,全力投入的結晶,研究Three.js的物體包覆,以及Camera 的使用,搭配Raycaster已獲取滑鼠在3D視圖中的座標向量所指到的目標等。資料方面則收集了來自NASA官網的行星資訊,從Planet Pixel Emporium下載到大量高品質的地圖素材等,練習使用Require.js,另外由於圖檔較大,在預載之後用到了Microcache.js來做緩存,並且自行寫了函式僅在當下星球使用高畫質圖檔,以減緩瀏覽器渲染的負擔,使畫面更為流暢。

在固定行星上,會將其公轉軸拉至水平面,才不會有畫面歪斜的問題,可以確保最好的星球追蹤品質。

Play Ground

點擊星球,就能夠飛往該行星,以當地視角,一覽不同的宇宙風光,顛覆你對世界的想像。如果太遠或者太小,亦可以透過左側的導覽列,選擇想要前往的星球。


預計更新

  • 將陸續新增各個行星的資訊頁面,以提供更多精彩的行星故事。
  • 多國語言

Taiwan Bike Map

前言

台灣近年來風行租借單車的服務,但是有礙於北部跟南部使用不同的租借系統,缺乏一個統一的入口可以查詢租借地點以及查看車位狀況,於是便動手寫了一個,結合Google Map API的定位系統,搭配後端使用CodeIgniter框架,以及到Open Data抓取腳踏車輛的地點座標等相關資料,並且為了使標記看起來不至於太擁擠,用了MarkerClusterer.js來做統整,可一目瞭然租借點的分佈。

實作

點擊腳踏車站點,可看剩餘車位以及可借車數。用手機可以查看即時的現在地,以方便參考相對位置。地圖資訊每分鐘更新一次。

Go to page

涵蓋範圍

Youbike

  • 台北市
  • 新北市
  • 桃園市
  • 新竹市
  • 苗栗縣
  • 台中市
  • 彰化縣
  • 屏東縣

T-Bike

  • 台南市

CityBike

  • 高雄市