メニュー
ふわっと表示をjQueryで簡単に実装する方法を紹介します!
  • 中野貴登:Webクリエイター

ふわっと表示をjQueryで簡単に実装する方法を紹介します!

こんにちは、イデアックスの「中野」です。

webサイトにはいくつかアニメーションがありますが、最近はスクロールすると要素がふわっと表示されるアニメーションを多く見かけます。

このアニメーションを行うことにより、見ている方に柔らかい印象を与えることができます。

ふわっと表示させるアニメーションは、jQueryを使用すると簡単に実施することができます。今回は要素をふわっと表示させるためのコードを紹介したいと思います。

スクロールアニメーションの設定の流れ

ふわっと表示させるスクロールアニメーションを設定するには、jQueryの導入JavaScriptのコードの記入が必要です。

それぞれ詳しく見ていきましょう!

jQueryの導入

まずはjQueryの導入に関して説明します。jQueryを導入するには下記のコードを<head>と</head>の間に入力する必要があります。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

これでjQueryの導入は終わりです。

JavaScriptのコード記述

jQueryの導入が終わったら、JavaScriptでふわっと表示するスクロールアニメーションの設定を行います。

下記のコードを入力すると、ふわっと表示されるようになります。


ScrollReveal().reveal('ふわっと表示させたいクラス名');

上記のコードにふわっと表示させたいクラス名を追加するだけで、スクロールアニメーションを実装することができます。

コード入力はJavaScriptファイル、HTMLファイルどちらでも構いません。HTMLファイルの場合は</body>の直前に入力してください。また、下記のように<script>タグで囲うことを忘れずにしてくださいね。


<script>
 ScrollReveal().reveal('ふわっと表示させたいクラス名');
</script>

アニメーションの詳細設定

ここではアニメーションの詳細設定について説明します。

詳細設定を行うことで、ふわっと表示されるまでにかかる時間の変更やアニメーションを実行するタイミングなどを変更することができます。

主な詳細設定に必要なコードは下記のようになります。

オプション名説明
durationミリ秒アニメーションが完了されるまでに
かかる時間。
viewFactor0~1どのくらい見たらアニメーションを実行するか。
0が早く、1が遅い。
resettrue or falseアニメーション要素に再度訪れた時、
再度実行するかしないか。
アニメーション設定一部抜粋

実際にコードを記載すると下記のようになります。


ScrollReveal().reveal('クラス名', { 
  duration: 800, 
  viewFactor: 0.2
  reset: true
});

このようにコードを記入すると、スクロールアニメーションの詳細設定を行うことができます。

最後に

以上がフワッと表示されるスクロールアニメーションの紹介でした。非常に簡単に実装することができるので、是非やってみてください。

弊社では他にもコーディングに関する記事を書いております。興味がございましたら合わせて読んでみてください。

合わせて読みたい記事↓