2022年10月6日コーディングページをスクロールするとコンテンツや画像がアニメーションで表示されるサイトってカッコいいですよね!今回はCSSとJavaScriptで簡単なスクロールアニメーションを実装する方法を解説します。CSSとJavaScriptでスクロールアニメーションを実装するスクロールアニメーションの考え方スクロールアニメーションを実装する方法は色々ありますが、今回は出来るだけシンプルな方法で実装しようと思います。具体的には以下の仕様で実装します。アニメーションさせたい要素に.animationというクラスを付けるJavaScriptでスクロールを監視し、.animationの要素がトリガーに接したら.showというクラスを付けるCSSで.showをアニメーションさせるJavaScriptはスクロールのトリガーに使うだけで、アニメーションはCSSで実装する形になります。以下のディレクトリ構成を想定して解説していきます。index.htmlindex.htmlのコード3つのセクションに分けてアニメーションを実装します。1つ目のセクションはフェードインで画像を表示します。2つ目のセクションは3つの画像を時間差で表示します。3つ目のセクションは白と黒の要素がスライドした後に画像を表示します。index.htmlの内容は以下のようになります。src="js/script.js"></script></body></html>.fadeinが1つ目のセクション、.orderが2つ目のセクション、.slideが3つ目のセクションです。.triggerはアニメーションの開始位置の目印で、.triggerが.animationと交差したらアニメーションがスタートします。style.cssのコードCSSでスタイルを整えます。style.cssの内容は以下のようになります。#000;}まずは.fadeinと.orderと.slideのアニメーション前のスタイルを指定し、それぞれのクラスに.showを追加してアニメーション後のスタイルをしていしています。アニメーションの時間や遅延はtransitionプロパティで指定しています。script.jsのコードスクロールすると.animationに対して.showを追加するJavaScriptを書きます。script.jsの内容は以下のようになります。}};IntersectionObserverを使って要素の交差を監視していますが詳しい解説は省きます。IntersectionObserverについては以下の記事が大変参考になりました。MEDIAウェブのリッチな表現としてスクロールに応じたエフェクトがあります。これまでJavaScriptのscrollイベントで実装していましたが、Intersectio...ics.mediarootMarginでアニメーションの開始位置を指定しています。0px"と指定すると、.animationがビューポートの縦中央に接したらアニメーションが始まります。0px"のように指定します。CSSとJavaScriptでスクロールアニメーションを実装する今回はtransitionプロパティでアニメーションを指定しましたが、animationプロパティと@keyframesでアニメーションを指定してもOKです。animationプロパティでのアニメーションについては以下の記事で解説しています。CSSだけでホームページのアニメーションを実装する方法ホームページを開いた時に、画像やテキストがアニメーションするとかっこいいですよね。以前はJavaScriptでアニメーションを実装することが多かったですが、CS...ryob.netCSSだけでは実現できない複雑なアニメーションを作りたい場合は、GSAP(TweenMax)というJSライブラリを使うのがオススメです。いろいろなアニメーションを実装できるので興味がある方は調べてみてください。以上が、CSSとJavaScriptでスクロールアニメーションを実装する方法でした。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメント*Gulpのおすすめパッケージを紹介!SassのコンパイルやブラウザのオートリロードなどWebデザインやWordPressの独学には図書館を活用しようスポンサーリンクPROFILE2012年からWebサイト制作に関わり2022年に独立。現在はフリーランスのWebデザイナーとして活動しています。Webサイトのデザイン、WordPressでのサイト構築、HTMLとCSSのコーディングなどをメインでやっています。