- NT：Webクリエイター
-
ふわっと表示をjQueryで簡単に実装する方法を紹介します！
こんにちは、イデアックスの「N」です。
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 | ミリ秒 | アニメーションが完了されるまでに かかる時間。 |
| viewFactor | 0~1 | どのくらい見たらアニメーションを実行するか。 0が早く、1が遅い。 |
| reset | true or false | アニメーション要素に再度訪れた時、 再度実行するかしないか。 |
実際にコードを記載すると下記のようになります。
ScrollReveal().reveal('クラス名', {
duration: 800,
viewFactor: 0.2
reset: true
});
このようにコードを記入すると、スクロールアニメーションの詳細設定を行うことができます。
最後に
以上がフワッと表示されるスクロールアニメーションの紹介でした。非常に簡単に実装することができるので、是非やってみてください。
弊社では他にもコーディングに関する記事を書いております。興味がございましたら合わせて読んでみてください。
合わせて読みたい記事↓
