anime.js 面白いけど動きすぎ

意味のないものができてしまった

f:id:happy_teeth_ago:20191030220018g:plain

JavaScript

 $('.duration-demo').on('click', function () {
        anime({
            targets: '.duration-demo',
            translateX: function (el) {
                return el.getAttribute('data-x');
            },
            translateY: function (el, i) {
                return 50 + (-50 * i);
            },
            scale: function (el, i, l) {
                return (l - i) + .25;
            },
            rotate: function () { return anime.random(-360, 360); },
            borderRadius: function () { return ['50%', anime.random(10, 35) + '%']; },
            duration: function () { return anime.random(1200, 1800); },
            delay: function () { return anime.random(0, 400); },
            direction: 'alternate',
            loop: true
        });

    })

html

 <h2 id="sec01" class="duration-demo" data-x="300">ABOUT</h2>
  <h2 id="sec01" class="duration-demo" data-x="200">B</h2>
  <h2 id="sec01" class="duration-demo" data-x="100">O</h2>
  <h2 id="sec01" class="duration-demo" data-x="150">UT</h2>

functions.php

function my_script(){

  wp_enqueue_style( 't-css', get_template_directory_uri() . '/style.css' , array() , '1.0.0', 'all' );
  wp_enqueue_style( 'animate-css', get_template_directory_uri() . '/css/animate.css', array() , '1.0.0', 'all' );
  wp_enqueue_script( 'animate', get_template_directory_uri() . '/js/anime.min.js', array('jquery'), '1.0.0', true );
  
  wp_enqueue_script( 'wow.js', get_template_directory_uri() . '/js/wow.js', array('jquery'), '1.0.0', true );
  
  wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.0.0', true );

}