CSSで要素をふわっと表示させる方法を解説！

CSSでふわっと画像や文字を表示させて、よりオシャレなサイトを作成したいことがあります。

ここでは文字を用いてその方法の紹介と合わせて、スクロールした際に文字が浮かび上がって出てくる方法についても紹介します。

ここではCSSで要素をふわっと表示させる方法についてCSSのみで行う方法、jQueryを用いてスクロール時もしくはページ読み込み時に行う方法についてそれぞれの項目で紹介します。

CSSのみで要素をふわっと表示させるには、アニメーションを用いる必要があります。

ではアニメーションを用いるとどのようになるか、サンプルコードで実際の挙動を見てみましょう。
 

このようにふわっと文字がフェードインして表示されていることが分かります。

ではアニメーションの解説をします。

まずアニメーションさせたい要素にanimation-nameで適当な名前を設定してください。
そしたら次に@keyframes animation-nameに今回の場合は始めにopacity: 0;最後にopacity: 1;としたいので、0%と100%にそれぞれ記述します。

そしてanimation-duration: 1s;で1秒かけてアニメーションするように設定して、今回はフェードしていることが分かりやすく伝えるために5回フェードさせる記述をanimation-iteration-count: 5;で行っています。

スクロール時にふわっと文字が出てくるようにするためにはjQueryを用います。

では実際にサンプルコードを用いて挙動を見てみましょう。

スクロールすると文字がふわっとフェードインして浮かび上がることが分かります。

ではサンプルコードの解説を行います。

まずCSSではtransitionプロパティを用いて、opacityを3秒かけて変化させることによって、フェードを実現させています。

jQueryでは今回はスクロールされたときの処理なので、scrollイベントを用います。そしてフェードさせたい要素に対して、機能を持たせます。

$(this).offset().topではフェードさせる要素の高さを示しています。

$(window).scrollTop()はスクロールした際の垂直方向のスクロール幅を示しており、初期値は0となっています。

$(window).height()はwindowの高さを示しています。

そしてもしscroll > targetElement - windowHeightの時に、classにview
をもたせることで、文字が表示されるように設定しています。

今回はtargetElement - windowHeightがマイナスとなるためにスクロールされると直ぐに表示される形となっています。

先ほどのスクロール時にふわっと表示させる方法だと、スクロールしないと内容が表示されません。

今回はスクロールしなくてもページを読み込んだ際にもふわっと表示させる方法について紹介します。

こちらに関してはリロードしていただくと分かるのですが、スクロール時と合わせて、ページを読み込んだ際にも文字がふわっとフェードインして表示されていることが分かります。

ではコードの解説を行います。

コードとしては先ほどのふわっと表示させる方法とほとんど同じで、違う点としては、ふわっと表示させる方法でのjQueryのコード全体をwindow.onloadで囲んだ点です。

そうすることでページを読み込んだ際の処理を行うことができます。

こちらの方法も適宜調整が必要です。

いかがでしたでしょうか？

スクロールした際にふわっと表示させることで、よりオシャレなWEBページを作成することができます。

また1つ補足としてscrollイベントは1つ1つが少し重い処理なので、使いすぎるとWEBページのロードが長くなってしまいます。

そんな時には同じくscroll処理をしてくれるIntersectionObserverなどを用いてみるといいかもしれません。

まずは基本としてここで紹介した方法を試してみてください。