【jQuery】スクロールするとフェードインで表示されるアニメーションの作り方2020.02.08jQueryBこんにちは、ryohei(@ityryohei)です!本記事では、jQueryでスクロール中に画面内に入った要素をフェードインで表示する方法のご紹介しています。フェードインのアニメーションと言えば、「AOS」という超有名プラグインがあります。「AOS」を読み込んで「class」と「data-*」を付与すれば簡単にフェードインアニメーションを実装することができます。パラメータも豊富で設定次第で多種多様なアニメーションを実装することが可能となっています。(詳しくはプラグインの公式サイトをご参照ください。)複雑なアニメーションを実装したい場合、積極的にプラグインを使用しても良いかと思います。決まったパターンのフェードインアニメーションであれば、プラグインに頼るまでもないかな、と思いまして今回スクリプトを自作してみました。今回作成したフェードインアニメーションは下記の2種類です。スクロールすると要素がフェードインで表示されるアニメーションスクロールすると要素が上から降りてくるような動きを追加したフェードインアニメーションどちらもスクロールして表示されることが前提のアニメーションとなりますが、それぞれの実装方法を詳しくご紹介していきたいと思います。本記事の内容フェードインアニメーション上から降りてくるような動きを追加したフェードインアニメーション最後にでは、解説していきます。フェードインアニメーション最初に通常のフェードインアニメーションからご紹介していきます。本記事では、「fedeIn」というclass属性を持った要素をアニメーションの対象とします。「fedeIn」の要素がスクロール中に可視範囲に表示されると、フェードインアニメーションが実行される、といった形になります。HTMLで「fedeIn」というclass属性を持った要素を作成しておきましょう。--></div>※本記事では割愛させていただきますが、デモでは「box」というclass属性を持つ要素に別途スタイルを定義しています。「fedeIn」のclassには、下記のスタイルを定義しておきます。一般的なフェードインでも使用する「transition」と「opacity」のプロパティになります。1;}上記のスタイルを追加して、ページを再読み込みしてみましょう。「fedeIn」要素はページに表示されていないかと思います。0;」を定義しているからです。「opacity」は要素の透明度を設定するプロパティになります。その値が「0」となっているため、読み込み時に「fadeIn」のclassを持つ要素はページに表示されていない状態となっています。「fedeIn」要素を表示させるには「animated」というclassを追加し、「opacity」の値を「1」に上書きしてあげる必要があります。その処理をスクロールで実行するわけですが......。いう処理は実現できません。ここではjQueryを使用して動的な処理を実行することにします。jQueryで実行するのは、スクロール中に「fedeIn」の要素が可視範囲に表示されたら「animated」を追加する、という処理です。下記はその一連の処理をまとめたスクリプトのサンプルになります。変更が必要な箇所にコメントを入れていますので、処理を追いながら併せてご参照いただければと思います。});});「box」のスタイルによって外観は異なりますが、本記事でご紹介したコード群をすべてまとめると下記のデモが完成します。実際にスクロールして動きをご確認ください。CodePen.ページをスクロールすると「fedeIn」を持つ要素がフェードインアニメーションで表示されるかと思います。スクロールすると実行されるアニメーションは見ていて気持ちが良いですよね。これだけでも十分素敵なアニメーションになっているわけですが、これに加えてもう一つ別の動きを追加してみたいと思います。フェードインで表示される際に要素が上から下に降りてくるようなアニメーションを追加してみましょう。上から降りてくるような動きを追加したフェードインアニメーションHTMLとjQueryのスクリプトは、前項でご紹介したものを使用しますので、本項では割愛させていただきます。変更を加えるのはCSS部分になります。下記が変更後のスタイルです。「transform」プロパティが追加となります。1;}「translate3d」で「fadeIn」の初期位置を上にずらしておき「animated」のclassが追加されると元の位置に戻ります。することで下記のようなアニメーションを簡単に追加することができます。CodePen.少し動きを加えるだけでも違った印象になりますね。本記事では「translate3d」でアニメーションを追加していますが、「scale」であったり「rotate」であったり動きを変更することで多くの種類のアニメーションを作ることができます。自分だけのあ二メーションを作成してみてくださいね。最後にいかがでしたでしょうか。スクロールして何か処理を実行する、というのはサイト制作をする上で何度も実装することになる処理です。本記事でご紹介した内容がお役に立てれば幸いです。Webエンジニアご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が普段業務をする中で得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。