【ScrollReveal.js】ふんわり表示させる

WEBデザイン

要素をふんわり表示する」を実装します。

本当に簡単なコードで設定できます。

 

【ScrollReveal.js】スクロールした時にふんわり表示

 

このふんわり表示は、このScrollReveal.jsというjavaScriptのライブラリを使います。

つまりは、唐揚げ定食です。

コードを1から書くとなると、料理の勉強をして

調味料や、野菜、鶏肉、お米を準備して、調理して

お皿を用意して、盛付けて、

やっといただきます!ですが、

javaScriptのライブラリを使えば、「唐揚げ定食ください」で、

すぐに食べられるという訳です。

 

【使い方 1 】 ScrollReveal.js 

ScrollReveal 4 A powerful new version of the web’s favorite scroll animation scrollrevealjs.org

こんな感じで、コピーします。

<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が使えます。

 

【使い方 2】 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にすると、大きな文字が画面に

出てきて、通常のサイズに戻るというアニメーションになります。

とにかく、色々とコードを変えてみることで、何ができるのが理解できます。