画像やテキストが弾むように動くアニメーションを表示する方法

ページが開いたときに、画像やテキストが弾むように動くアニメーションを表示する方法をお伝えします。

具体的には、このページが開いたときに、下記の画像が動いて表示されましたよね。
（もう一度見るには、ここをクリックしてみてください）

このような画像やテキストがバウンスする（弾むように動く）アニメーションを表示する方法をお伝えします。

しかも、ここでお伝えする方法は、簡単な修正で、いろいろなパターンの動きを実現できるため、とても便利です。

少し派手な動きをしますけど、ホームページに動きが出るので、必要に合わせて活用してくださいね。

■ 画像やテキストが弾むように動くアニメーションを表示する手順

手順１：動きを入れたいページのヘッダー（</head>の真上）に、下記のソースを入れる。

↑ソースが長かったので、枠に入れました。
　上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。

【注意】

ソースを入れるページは、動きを入れたいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。

ソースを入れる場所については、十分、注意してください。

手順２：動きを入れたい箇所に、下記のソースを入れる。

動きを入れたい箇所に、上記のソースを入れます。

なお、上記のソースで、「div」で囲んでいるところには、文字を入れても良いですし、画像を表示するソース（imgタグ）を入れても良いです。

現在は、「<img src="gazou.jpg" alt="">」と記述していますけど、ここは自由に変更していただいて大丈夫です。
（つまり、「div」で囲んだところが動く、ということです）

もし、画像を表示したい場合は、上記のソースの「gazou.jpg」は、表示させたい画像のファイル名に変更してくださいね。

【注意】

「自分で更新できる最短ホームページテンプレート」 をお使いの場合は、 HTMLファイル（index.htmlファイルなど）と同じ場所に、画像を保存するようにしてください。

手順３：ページが表示されたときに動くことを確認する。

ホームページの表示を確認して、ページが表示されたときに、画像やテキストが弾むように動くことを確認します。

テキストや画像が動いたら、確認作業は完了です。

【いろいろなパターン】動き方を変更する方法

動きを入れたい箇所に入れるソースを少し修正するだけで、動き方を簡単に変えることができます。

ここでは、いろいろなパターンの動き方をご紹介するので、好みに合わせて使ってください。

【注意】

「手順１」でお伝えした、動きを入れたいページのヘッダー（</head>の真上）に入れるソースは、必ず入れておくようにしてください。
（ヘッダーにソースを入れておかないと、動かないです）

フリップアニメーション

■ 動きを入れたい箇所に入れるソース

左から高速でイン

■ 動きを入れたい箇所に入れるソース

回転しながらイン

■ 動きを入れたい箇所に入れるソース

ヒンジアニメーション

■ 動きを入れたい箇所に入れるソース

ジャックインザボックスアニメーション

■ 動きを入れたい箇所に入れるソース

ロールインアニメーション

■ 動きを入れたい箇所に入れるソース

ハートビートアニメーション

■ 動きを入れたい箇所に入れるソース

パルスアニメーション

■ 動きを入れたい箇所に入れるソース

ラバーバンドアニメーション

■ 動きを入れたい箇所に入れるソース

X軸にシェイク

■ 動きを入れたい箇所に入れるソース

スイングアニメーション

■ 動きを入れたい箇所に入れるソース

タダアニメーション

■ 動きを入れたい箇所に入れるソース

ウォブルアニメーション

■ 動きを入れたい箇所に入れるソース

ジェローアニメーション

■ 動きを入れたい箇所に入れるソース

下からバックイン

■ 動きを入れたい箇所に入れるソース

下にバックアウト

■ 動きを入れたい箇所に入れるソース

■ やり方が分からない場合は？

もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。

【すぐに解決する】
・ホームページのトラブルと悩みを解決！あなたの仕事をお手伝いします

「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。

このページのトップ↑

【よく読まれている関連記事】

バウンスして動くアニメーションを表示する方法

バウンスして動くアニメーションを表示する方法