主要的職責是 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 套件去操作圖片製作動態效果
就會得到下面這樣的結果 ~