「要素をふんわり表示する」を実装します。
本当に簡単なコードで設定できます。
目次
【ScrollReveal.js】スクロールした時にふんわり表示
このふんわり表示は、このScrollReveal.jsというjavaScriptのライブラリを使います。
つまりは、唐揚げ定食です。
コードを１から書くとなると、料理の勉強をして
調味料や、野菜、鶏肉、お米を準備して、調理して
お皿を用意して、盛付けて、
やっといただきます！ですが、
javaScriptのライブラリを使えば、「唐揚げ定食ください」で、
すぐに食べられるという訳です。
【使い方 1 】 ScrollReveal.js
こんな感じで、コピーします。
<script src="https://unpkg.com/scrollreveal"></script>そして、この辺に貼り付け！ htmlファイルの、<head> </head>の中です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
これで、ScrollReveal.jsが使えます。
【使い方 ２】 JavaScriptを書く（コピペする）
下のコードをコピペする！<script> </script>の中に入れてください。
<script>
//ふわっと表示
ScrollReveal().reveal('.scrollReveal',{
duration: 2000, // アニメーションの時間
viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
reset: false, // アニメーションを繰り返すか
distance: '50%', //表示された時に要素が移動する距離
scale: 1, //表示される前の要素のサイズ
delay: 500, //アニメーションが実行されるまでの時間
interval: 800, //各アニメーションの間隔
opacity: 0, //表示される前の不透明度
origin: 'bottom',//要素がどの方向から来るか
mobile:true //スマホで有効か
});
</script>
</body>
</html>貼り付ける場所は、</body> タグの上あたり、つまり、htmlファイルの一番下あたりです。
このコードの一行目
ScrollReveal().reveal('.scrollReveal',{ ・・・・「.scrollReveal」の部分は、class名です。
このclass名がついている要素に対して、ふんわり表示をさせて！という意味のコードです。
このclass名は自分で好きなものをつければOKです！
【使い方 3】 ふんわり表示させたい要素に、classをつける
<h1 class="scrollReveal">このテキストをふんわり表示させる</h1>こんな感じで、<h1>に、「scrollReveal」と、class名をつけます。
これによりさっきのJavaScriptのコードが、それを検知！
あの<h1>を、ふんわり表示させろ！と、命令を出してくれます。
あとは、htmlでコードを書いていき、ふんわり表示をさせたい要素が
出てきたら、
「class = “scrollReveal”」を書くだけです。
【使い方 4】 ふんわり表示のカスタマイズ
<script>
//ふわっと表示
ScrollReveal().reveal('.scrollReveal',{
duration: 2000, // アニメーションの時間
viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
reset: false, // アニメーションを繰り返すか
distance: '50%', //表示された時に要素が移動する距離
scale: 1, //表示される前の要素のサイズ
delay: 500, //アニメーションが実行されるまでの時間
interval: 800, //各アニメーションの間隔
opacity: 0, //表示される前の不透明度
origin: 'bottom',//要素がどの方向から来るか
mobile:true //スマホで有効か
});
</script>
</body>
</html>先ほどのコードは、カスタマイズして使用できます。
いくつか解説すると、
durationでアニメーションが
完了する時間を長くすれば、ふんわり具合がゆっくりになります。
originで、ふわっと出てくるスタート地点を指定できます。
下からなら、bottom
上からなら、top
distanceの％を大きくすれば、元の位置から離れた位置から要素が出現します。
scaleの数値は1を基準とするので、2にすると、大きな文字が画面に
出てきて、通常のサイズに戻るというアニメーションになります。
とにかく、色々とコードを変えてみることで、何ができるのが理解できます。