意味のないものができてしまった
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 );
}