WordPressで手軽にアニメーション（脱プラグイン）

Wordpress

プラグインを使わずアニメーションしたいので、テーマを直接編集します。

Cocoon + 子テーマ が前提です。

子テーマの head-insert.php に animate.css を読み込みます。

<?php
//ヘッダー部分（<head></head>内）にタグを挿入したいときは、このテンプレートに挿入（ヘッダーに挿入する解析タグなど）
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例：<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_administrator()) :
//管理者以外カウントしたくない場合は
//↓ここに挿入?>

<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>

<!-- animation -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

動作を確かめます。class を足すだけで良いです。

fadeIn
<img class="animate__animated animate__fadeIn" src="https://milkmoo.info/img/uhohoi.png" />
fadeOut
<img class="animate__animated animate__fadeOut" src="https://milkmoo.info/img/uhohoi.png" />
classに animate__ が付いているのは4系だから。3系までは不要。

 

fadeIn
fadeOut

たぶん、上記 fadeOut の方、消えてますよね？
アニメーションを確かめるにはブラウザを更新してね

fadeIn の方、ほんとに動いてる？
くらい一瞬の出来事

こんな class も足せますが…

<img class="animate__animated animate__fadeIn animate__slower animate__repeat-2 animate__delay-1s" src="https://milkmoo.info/img/uhohoi.png" />
</style>

細かい調整をしたい場合、CSS を弄ることになります。

しかし、そんなことなら素のCSS(脱animate.css)の keyframes を弄ればいいんじゃね、という話しになります。

<img class="bounce" src="https://milkmoo.info/img/uhohoi.png" />
</style>

.bounce {
  animation: bounce;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: 3;
}

アニメーションを確かめるにはブラウザを更新してね

けれど、このままでは役に立ちません。ブラウザが読み込んだとたんアニメーションが始まってしまうから。

画面下方の要素だと、それが見える頃にはアニメーションが終わっているという哀しさ。

ブラウザがスクロールし、アニメーションしたい要素が画面内に入ったタイミングに合わせて動いてもらわないと困る。

そこで Wow.js 。ダウンロードし自サイトに転送しておきます。

GitHub - matthieua/WOW: Reveal CSS animation as you scroll down a page
Reveal CSS animation as you scroll down a page. Contribute to matthieua/WOW development by creating an account on GitHub.
github.com

子テーマの head-insert.php 内に読み込みましょう。animate.css の後で良いでしょう。

<script src="https://milkmoo.info/js/wow.min.js"></script>

wow.js を初期化するため、子テーマの footer-insert.php 内（bodyの後タグ直前）に書き加えます。

<script>
  new WOW().init();
</script>

動かしてみましょう。クラスを追加します。

<img class="wow animate__animated animate__bounce" data-wow-dutation="3s" data-wow-delay="2s" data-wow-iteration="3" src="https://milkmoo.info/img/uhohoi.png" />

コメント