Skip to main content

アニメーション

目標#

ページをスクロールするとコンテンツがフワッと登場するアニメーションをつけよう

手順#

animonというライブラリを使用します。 ライブラリ、とは「便利なプログラムをみんなが使いやすいようにまとめたもの」です。

1.Glitch で index.html を開き、</head> のすぐ上に以下の2文を追加する。#

これで、animonの情報を使うことができます。

<link rel="stylesheet" href="https://unpkg.com/animon@1.0.1/dist/animon.css"/><script src="https://unpkg.com/animon@1.0.1/dist/animon.iife.js"></script>

2.HTMLのコードの中で、ふわっと上がるアニメーションを追加したい箇所のclass=の中にanimonItemを追加する#

<div class="card">    <img src="./imgs/cafe1.jpg" alt="cafe1" />    <h3>Waffle Cafe</h3>    <p>落ち着いたデザインがおしゃれなカフェ</p></div>

今回は、下の5行がふわっとしたい箇所なので、1行目のclass="card"をclass="card animonItem"に変更する。

(例)↓こんな感じ

<div class="card animonItem">    <img src="./imgs/cafe1.jpg" alt="cafe1" />    <h3>Waffle Cafe</h3>    <p>落ち着いたデザインがおしゃれなカフェ</p></div>

注意) card と animonItem の間は、半角のスペースです

3.index.html の </body>の直前に、下のコードを追加しよう！#

これは、Animonというアニメーションに関するプログラムを実行するよう命令を出します。

<script type="text/javascript">    Animon.animon()</script>

4. どんなアニメーションにするか指定しよう！#

class名の指定の後に、data-effect="fadeInUp" というコードを追加してみよう！アニメーションが変わったかな？

<div class="card animonItem" data-effect="fadeInUp"><!-- 中略 --></div>

5.(TRY!) animonのサイトのOptionsの部分を見て、好きなアニメーションに書き換えよう！#

ヒント#

  • 今は、data-effect="fadeInUp" と書いているので、fadeInUp というアニメーションが追加されているよ

チャレンジ#

animonのサイトを参考に、data-duaration を指定することによって、アニメーションの継続時間を変更しよう！