lottie ロッティーアニメーション
本サイトトップページで
・画面内に入るとアリクイが歩いてくる
・フッターのペンギンをマウスオーバーするとアニメーションする（PCのみ）
こちらの二か所をロッティーアニメーションで実装しています
まずロッティーアニメーションを作るには
ロッティーアニメーション用のアニメーションJSONが必要です。
本サイトではafterエフェクトで作成しました。
afterエフェクトでアニメーションを作成してJSON書き出しをするのですが
その方法は他のサイトでたくさん紹介されているので割愛します。
html側は
<div id="arikui-img"></div>
といった感じでidを指定します。
あとは、JSの設定です。
アリクイの設定
const animation = lottie.loadAnimation({
container: document.getElementById('arikui-img'),
renderer: 'svg',
loop: false,
autoplay: false,
path: '/wp-content/themes/テーマ名/images/arikui.json',
})
window.addEventListener('scroll', (event) => {
const windowHeight = window.innerHeight
const targetTop = document.getElementById('arikui-img').getBoundingClientRect().top
if (targetTop > 0 && targetTop <= windowHeight) {
animation.setDirection(0)
animation.play()
} else {
// 画面から外れた時の動作
}
})
[/js]
ペンギンの設定
[js]
const iconMenu = document.querySelector('.penguin-img')
// eslint-disable-next-line no-undef
const animationMenu = bodymovin.loadAnimation({
container: iconMenu,
renderer: 'svg',
loop: true,
autoplay: false,
path: '/wp-content/themes/テーマ名/images/penguin.json',
})
const directionMenu = 1
iconMenu.addEventListener('mouseenter', (e) => {
animationMenu.setDirection(directionMenu)
animationMenu.play()
})
iconMenu.addEventListener('mouseleave', (e) => {
animationMenu.stop()
})
