【簡単!】スクロールするとフワッと表示させる方法を紹介します!

webサイトcoding

みなさんこんにちは。takato@enjoying_freeです!

スクロールすると下から要素がフワッと表示されるwebサイトを一度はみたことがありますよね。

一見難しそうに思われるかもしれませんが、意外と簡単に実装することができます。

今回は要素をフワッと表示させる方法を紹介したいと思います。


この記事でわかること

要素を下からフワッと表示させる方法!

スポンサー

完成イメージ

まず結論から、要素をフワッと表示されるコードとビューを見せます。

See the Pen abpWWvP by takato (@ttakkatto) on CodePen.

Result部分をスクロールすると、フワッと表示されるかと思います。

上記のように要素をフワッと表示させるには、「HTML」「CSS」「JavaScrip」の3つのコードを使用する必要があります。

下記でやり方を具体的に紹介します。

必要なコード

スクロールすると要素をフワッと表示させるには、「ScrollReveal」というライブラリを使用します。

ScrollRevealを使用することで、誰でも簡単にかつ早く実装することが出来ます。

まず、ScrollRevealの<script>コードを取得します。取得方法は、ScrollRevealのサイトにCDNというところがあるので、そこに記載してあるコードをコピーしてください。

取得したコードをhtmlファイルの<head></head>内に記入します。

<head>
 <script src="https://unpkg.com/scrollreveal"></script>
</head>

続いて、JavaScriptでScrollRevealを実装させたい要素の指定をします。

必要なコードは下記の通りです。

ScrollReveal().reveal('.box');

「reveal(‘.’);」の(‘.’)の中に、フワッと表示させたい要素のクラスを追加します。
(僕はboxというクラスを用いたので、上記のように記入しています。

これで準備は完了です。リロードしてスクロールすると、要素はフワッと表示されるようになります。

記入方法のコツ

ScrollRevealは、フワッと表示させたい要素のクラスを(‘.’)の中に入れると説明しました。

フワッと表示させたい要素が1つなら良いですが、おそらく複数あると思います。その際それぞれのクラスを追加するのは大変ですよね。

実はHTMLは1つの要素に複数のクラスを追加することが出来ます。

下記のように、”クラス名 クラス名”という形で複数のクラスを追加することが出来ます。

<div class="box fade"></div>

クラス名を1つ決めて、フワッと表示させたい要素にクラスを追加することで、JavaScriptにわざわざクラス名をたくさん入力する必要がなくなります。

こちらの方が早く設定できるので、是非やってみてください。

スポンサー

フワッと表示の注意点

フワッと表示はサイトを見ている人を気持ちよくさせます。

しかし一点だけ、現役webデザイナーから注意させてください。

それは、ファーストビューにうつる要素だけはフワッと表示をさせないことです。

フワッと表示はスクロールをすることで要素が表示されます。スクロールする前のファーストビューにフワッと表示をさせてしまうと、ファーストビューが真っ白になってしまいます。

もちろん少しでもスクロールすれば表示されるのですが、サイトを見ている人に対して「エラーかな?」と誤解させてしまいます。

そうならないためにも、ファーストビューにはフワッと表示を設定しないように注意してください。

最後に

以上がスクロールすると要素がフワッと表示させる方法と、やり方のコツと注意点の紹介でした。

皆さんの勉強の役に立てたら幸いです。

もしコーディングの独学が難しいと感じた場合、プログラミングスクールに通うのもありです。

実際に僕はテックキャンプに通い、未経験でwebデザイナーに転職しました。

プログラミングスクールのおすすめ記事があるので、興味のある方はこちらも読んでみてください。