木ミニ
木
木ミニ
木ミニ

ブログ

2024.01.22

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 {
    // 画面から外れた時の動作
  }
})
&#91;/js&#93;

ペンギンの設定

&#91;js&#93;
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()
})

HTML Javascirpt