[CSS] Animate.css v4 スクロールで動かす (初心者も)

Animate.css

Animate.cssのバージョンが4になり、思いっきり変更がありました。以前のままの状態でアニメーションが追加出来ないのでやり直しが必要です。スクロールするとアニメーションが始まる様にするには、wow.jsとの組み合わせがお勧めです。Animate.cssとwow.jsの方が、以前紹介したinview.jsよりも扱いやすいと教えてもらったので、その覚書です。初心者の方でもわかる様にダウンロードから書きました。お役に立てれば幸いです。

ダウンロードについて

Animate.cssもwow.jsも「ダウンロード」のリンクが見当たらないと思います。PCの環境を整えて、Nodeでインストールするのですが、初心者の方はそこまで頑張らなくても大丈夫です。GitHubから取ってきちゃいましょう。

Wow.jsの場合は、サイトの上に薄らとグレーで書かれた[GitHub]から移動して下さい。

Wow.js

GitHubはこんな感じです。

欲しいのは、[dist]フォルダの中にあるwow.jsです。[Code] → [Download Zip]へ進み、zipを解凍して下さい。

GitHub

同じ要領で、animate.cssもダウンロードします。Documentationの所にある[Edit this on Github]から移動します。(別にGithubで編集する訳ではありませんが、ここから入るとします)

若しくは、CDNをリンクしてもOKです。今現在のリンク先なので、公式サイトで確認して下さい。https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css

animate

animate.cssを配置する

<head>内にanimate.cssをリンクします。CDNか、サイト内のファイルまでのパスを書きます。・・・/css/animate.cssみたいな。

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.css" />

wow.jsを配置する(静的サイト)

静的サイトとは:普通のHPの事です。CMS (wordpressとか)で無いサイトの事です。

</body>の上に下記のコードを追加します。この例はjsフォルダ内に置いた場合です。

<script src="js/wow.js"></script>
<script>new WOW().init();
</script>

wow.jsを配置する(CMS)

静的サイトと同じ様に</body>の上に上記のコードを追加しても構いませんし、下記の様に、</body>とfunction.phpの2か所に書き分けてもOK

</body>の上にリンクを追加(wordpressの場合)

<script src="<?php echo get_stylesheet_directory_uri() ?>/js/wow.js"></script>

function.phpに以下を追加します。

add_action( 'wp_footer', 'add_meta_to_footer' );
function add_meta_to_footer() {
echo '
<script>
    new WOW().init();
</script>
';
}

書いてみましょう!

Animate.css にアクセスし、好みの動きを確認します。

動きの一覧をクリックすると、ロゴがその動きをします。マウスを文字に乗せると、小さなアイコンが表示され、Animation name(コード)をコピーする事が出来ます

animate

classを付けます。この書き方がv3と違うので注意して下さい。

基本は、class=”animate__animated コピーしたAnimation name” となります。

<p class="wow animate__animated animate__jello">プルプルする動き</p>

※7/11追記:ごめんなさい、wow を付けるのを忘れていました。

オプション

動きのスピード等、カスタムできるオプションが用意されています。

便利なオプション 足すだけでOK

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください