악마 폭룡의 태풍 제어 애니메이션

설치하다.

<script src="DXMEffect.js"></script>
<script>
  const elements = document.querySelectorAll('.dxm-effect');
  [].forEach.call(elements, function (el) {
      const dxmEffect = new DXMEffect(el, { 
      speed: 30,
      delay: 100,
      })
      dxmEffect.init()
  })
</script>

샘플 코드

일반적인 사용법

<p class="dxm-effect">The quick brown fox
jumps over the lazy dog.</p>

느린 애니메이션

const elements = document.querySelectorAll('.dxm-effect');
[].forEach.call(elements, function (el) {
    const dxmEffect = new DXMEffect(el, { 
    speed: 300,
    delay: 1000,
    })
    dxmEffect.init()
})

시작 시 지연

<p class="dxm-effect" data-dxmeffect-start-delay="1000">The quick brown fox jumps over the lazy dog.</p>

여러 요소 순차 애니메이션

<p id="effect1" class="dxm-effect">The quick brown fox jumps over the lazy dog.</p>
<p id="effect2" class="dxm-effect" data-dxmeffect-after="#effect1">The quick brown fox jumps over the lazy dog.</p>
<p id="effect3" class="dxm-effect" data-dxmeffect-after="#effect2">The quick brown fox jumps over the lazy dog.</p>

주의