影片: https://drive.google.com/file/d/1lhcb4h9K9b6hzFJHrOGlMnJxd6EHb4YK/view?usp=sharing

專案概要

這是innodisk宜鼎智慧交通的系統以及產品介紹網站

主要功能

• JS動態(聚焦、情境切換)
• CSS Clip-path動態
• Swiper輪播
• 產品popup

使用技術與工具

• 前端library：jQuery、swiper
• 其他: AWD、Sass/Scss、CSS Clip-path

專案負責範圍

• 前端切版
• 動態製作
• API串接
• 驗收文件製作

學習和困難

• 在製作頁面時遇到明明透過js的click事件給元素添加class卻沒有執行該class上添加上的transition過渡效果,推測跟safari本身的渲染機制有關

  解決方式 : 透過js訪問如offsetTop、offsetLeft、scrollTop 等特定屬性來去強行觸發瀏覽器的渲染機制,特定屬性在js訪問時會先渲染dom後才會去獲得相關屬性

• 當使用者使用iphone播放影片「途中」突然待機後再開啟,畫面會直接停在待機前的畫面無法操作

  解決方式 : 使用**Page Visibility API 監測畫面是否能被使用者看到,該api會在畫面狀態變化時觸發，**首先註冊 「visibilitychange」 的事件監聽,當使用者待機觸發事件時再透過 「document.hidden」 檢查畫面對於使用者來說是否被隱藏,為true時暫停播放、為false時繼續播放