ページが開いたときに、画像やテキストが弾むように動くアニメーションを表示する方法をお伝えします。
具体的には、このページが開いたときに、下記の画像が動いて表示されましたよね。
（もう一度見るには、ここをクリックしてみてください）
このような画像やテキストがバウンスする（弾むように動く）アニメーションを表示する方法をお伝えします。
しかも、ここでお伝えする方法は、簡単な修正で、いろいろなパターンの動きを実現できるため、とても便利です。
少し派手な動きをしますけど、ホームページに動きが出るので、必要に合わせて活用してくださいね。
■ 画像やテキストが弾むように動くアニメーションを表示する手順
手順１：動きを入れたいページのヘッダー（</head>の真上）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
|
【注意】
ソースを入れるページは、動きを入れたいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
手順２：動きを入れたい箇所に、下記のソースを入れる。
<div class="wow animate__animated animate__bounce">
<img src="gazou.jpg" alt="">
</div>
|
動きを入れたい箇所に、上記のソースを入れます。
なお、上記のソースで、「div」で囲んでいるところには、文字を入れても良いですし、画像を表示するソース（imgタグ）を入れても良いです。
現在は、「<img src="gazou.jpg" alt="">」と記述していますけど、ここは自由に変更していただいて大丈夫です。
（つまり、「div」で囲んだところが動く、ということです）
もし、画像を表示したい場合は、上記のソースの「gazou.jpg」は、表示させたい画像のファイル名に変更してくださいね。
手順３：ページが表示されたときに動くことを確認する。
ホームページの表示を確認して、ページが表示されたときに、画像やテキストが弾むように動くことを確認します。
テキストや画像が動いたら、確認作業は完了です。
【いろいろなパターン】動き方を変更する方法
動きを入れたい箇所に入れるソースを少し修正するだけで、動き方を簡単に変えることができます。
ここでは、いろいろなパターンの動き方をご紹介するので、好みに合わせて使ってください。
【注意】
「手順１」でお伝えした、動きを入れたいページのヘッダー（</head>の真上）に入れるソースは、必ず入れておくようにしてください。
（ヘッダーにソースを入れておかないと、動かないです）
|
フリップアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__flip">
<img src="gazou.jpg" alt="">
</div>
|
左から高速でイン
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__lightSpeedInLeft">
<img src="gazou.jpg" alt="">
</div>
|
回転しながらイン
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__rotateIn">
<img src="gazou.jpg" alt="">
</div>
|
ヒンジアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__hinge">
<img src="gazou.jpg" alt="">
</div>
|
ジャックインザボックスアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__jackInTheBox">
<img src="gazou.jpg" alt="">
</div>
|
ロールインアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__rollIn">
<img src="gazou.jpg" alt="">
</div>
|
ハートビートアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__heartBeat">
<img src="gazou.jpg" alt="">
</div>
|
パルスアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__pulse">
<img src="gazou.jpg" alt="">
</div>
|
ラバーバンドアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__rubberBand">
<img src="gazou.jpg" alt="">
</div>
|
X軸にシェイク
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__shakeX">
<img src="gazou.jpg" alt="">
</div>
|
スイングアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__swing">
<img src="gazou.jpg" alt="">
</div>
|
タダアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__tada">
<img src="gazou.jpg" alt="">
</div>
|
ウォブルアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__wobble">
<img src="gazou.jpg" alt="">
</div>
|
ジェローアニメーション
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__jello">
<img src="gazou.jpg" alt="">
</div>
|
下からバックイン
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__backInDown">
<img src="gazou.jpg" alt="">
</div>
|
下にバックアウト
■ 動きを入れたい箇所に入れるソース
<div class="wow animate__animated animate__backOutDown">
<img src="gazou.jpg" alt="">
</div>
|
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
