ページが開いたときに、画像やテキストが動いて表示される方法をお伝えします。
具体的には、このページが開いたときに、下記の画像が動いて表示されましたよね。
（もう一度見るには、ここをクリックしてみてください）
このような「スクロールアニメーション」を簡単に実現する方法をお伝えします。
しかも、ここでお伝えする方法は、簡単な修正で、いろいろなパターンの動きを実現できるため、とても便利です。
ホームページに動きが出て、見た目も良くなるため、ぜひ活用してくださいね。
■ ページが開いたときに、画像やテキストが動いて表示される手順
手順１：動きを入れたいページのヘッダー（</head>の真上）に、下記のソースを入れる。
↑ソースが長かったので、枠に入れました。
上記の枠内のソースをすべてコピーして、ヘッダーに貼り付けてください。
|
【注意】
ソースを入れるページは、動きを入れたいページです。
そして、ソースを入れる場所は、ヘッダーの中で、</head>の真上に入れます。
ソースを入れる場所については、十分、注意してください。
手順２：動きを入れたい箇所に、下記のソースを入れる。
<div data-aos="flip-right">
<img src="gazou.jpg" alt="">
</div>
|
動きを入れたい箇所に、上記のソースを入れます。
なお、上記のソースで、「div」で囲んでいるところには、文字を入れても良いですし、画像を表示するソース（imgタグ）を入れても良いです。
現在は、「<img src="gazou.jpg" alt="">」と記述していますけど、ここは自由に変更していただいて大丈夫です。
（つまり、「div」で囲んだところが動く、ということです）
もし、画像を表示したい場合は、上記のソースの「gazou.jpg」は、表示させたい画像のファイル名に変更してくださいね。
手順３：ページが表示されたときに動くことを確認する。
ホームページの表示を確認して、ページが表示されたときに動くことを確認します。
テキストや画像が動いたら、確認作業は完了です。
【いろいろなパターン】動き方を変更する方法
動きを入れたい箇所に入れるソースを少し修正するだけで、動き方を簡単に変えることができます。
ここでは、いろいろなパターンの動き方をご紹介するので、好みに合わせて使ってください。
【注意】
「手順１」でお伝えした、動きを入れたいページのヘッダー（</head>の真上）に入れるソースは、必ず入れておくようにしてください。
（ヘッダーにソースを入れておかないと、動かないです）
|
【フェード表示】通常のフェードイン
■ 動きを入れたい箇所に入れるソース
<div data-aos="fade">
<img src="gazou.jpg" alt="">
</div>
|
【フェード表示】下から上へのフェードイン
■ 動きを入れたい箇所に入れるソース
<div data-aos="fade-up">
<img src="gazou.jpg" alt="">
</div>
|
【フェード表示】左へのフェードイン
■ 動きを入れたい箇所に入れるソース
<div data-aos="fade-left">
<img src="gazou.jpg" alt="">
</div>
|
【回転表示（フリップ表示）】上向きのフリップ
■ 動きを入れたい箇所に入れるソース
<div data-aos="flip-up">
<img src="gazou.jpg" alt="">
</div>
|
【回転表示】左向きのフリップ
■ 動きを入れたい箇所に入れるソース
<div data-aos="flip-left">
<img src="gazou.jpg" alt="">
</div>
|
【スライド表示】下から上へのスライド
■ 動きを入れたい箇所に入れるソース
<div data-aos="flip-left">
<img src="gazou.jpg" alt="">
</div>
|
【スライド表示】左へのスライド
■ 動きを入れたい箇所に入れるソース
<div data-aos="slide-left">
<img src="gazou.jpg" alt="">
</div>
|
【ズーム表示】ズームイン
■ 動きを入れたい箇所に入れるソース
<div data-aos="zoom-in">
<img src="gazou.jpg" alt="">
</div>
|
【ズーム表示】下から上へのズームイン
■ 動きを入れたい箇所に入れるソース
<div data-aos="zoom-in-up">
<img src="gazou.jpg" alt="">
</div>
|
【ズーム表示】左へのズームイン
■ 動きを入れたい箇所に入れるソース
<div data-aos="zoom-in-left">
<img src="gazou.jpg" alt="">
</div>
|
【ズーム表示】ズームアウト
■ 動きを入れたい箇所に入れるソース
<div data-aos="zoom-out">
<img src="gazou.jpg" alt="">
</div>
|
■ やり方が分からない場合は？
もし、やり方が分からなかったり、うまく行かなかった場合は、下記ページからお問い合わせください。
「こういうことを実現したい！」や「こんなことで困っている…」などを含めて、当サイトの運営者が、直接サポートさせていただきますね。
【よく読まれている関連記事】
