主要的職責是 banner 上標籤的滑鼠動態效果等功能

主要使用到的技術為 vue2 、 Lottie 、 parallaxjs

— 整體框架使用 vue2

— 使用 Lottie 動畫取代 GIF，使用原生 JS 製作滑鼠互動效果

— 使用 parallaxjs 製作滑鼠移動的動態效果

Banner 的動畫是外包給認識的朋友，並與他研究從 AE 轉換 Lottie 檔案

主要還是有一些動畫技術上問題要解決

這塊就數朋友技能部分~

成功拿到 Lottie 檔後，會有一份 html 檔以及 json 檔案

<div id="lottie">
// lottie html 檔案資料
</div>

const data = await axios.get(`/${file_name}.json`).then(function (response) {
  return response.data;
}); 

const lot = lottie.loadAnimation({
  container: document.getElementById('lottie'),
  renderer: 'svg',
  loop: false,
  autoplay: true,
  animationData: data,
});

lot.play();

在 lottie 動畫跑完後，再使用 parallaxjs 套件去操作圖片製作動態效果

就會得到下面這樣的結果 ~