2023 台灣人秀畢業歌大賽網站

  • 動態互動
  • 投票網站
  • 第三方登入串接

上線時間:2023/06

活動網站前端製作,動態製作與第三方登入投票串接,實現地圖互動移動效果,並且滿足不同螢幕尺寸與裝置

2023 台灣人秀畢業歌大賽網站

專案負責項目:

  • 前端切版
  • 動態製作
  • 第三方登入投票串接

使用技術:

  • React
  • SCSS
  • TailwindCSS

台灣人秀畢業歌大賽網站是一個專為高中生設計的自創畢業歌網路票選活動平台。參賽者可以在網站上提交他們的自創畢業歌曲,並邀請朋友和家人進行投票。




網站使用了地圖移動特效,機車圖示會隨著公路路徑環島移動,讓用戶可以直觀地瀏覽和探索來自不同地區的參賽作品,增添了互動性和趣味性。

動態畫面展示:


  • 抓著地圖移動的效果,是透過滑鼠事件加上與整體地圖尺寸的比例,來計算出要位移的距離。

  • 使用 scrollTo + 座標資料,來實現整體地圖跟著機車移動效果。

  • 機車的移動路徑則是使用繪製好的向量檔作為移動路徑,來進行等速移動。



手機版畫面展示:

手機版的台灣是直向排版,並且有地圖移動特效。

串接 FB sso 登入 / 社群分享:

通過串接 Facebook SSO 登入和社群分享功能,提升用戶體驗,快速登入就可以投票。

使用者可以透過 Facebook 登入,並且分享活動網址到自己的 Facebook 動態牆上,一鍵分享,增加活動的曝光度。

© 2024 Merano Tu. All rights reserved.