見出し画像

【WEB制作】ふんわり表示「ScrollReveal.js」サラリーマン投資家のFIREへの旅路 第73夜

S.A.P.Studio


本日は、「要素をふんわり表示する」を実装します！

これ、ほんまに超簡単！ 肌感だと、一行書くだけ！

こんなやつね。オシャレサイトでよく見ますよね〜


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

このふんわり表示は、このScrollReveal.jsっていうやつを使っていきます。

これは、javaScriptのライブラリというものです。

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

１から書くとなると、料理の勉強をして
調味料や、野菜、鶏肉、お米を準備して、調理して
お皿を用意して、盛付けて、やっといただきます！ですが、

javaScriptのライブラリを使えば、
「唐揚げ定食ください」で、すぐに食べれます。

これがライブラリです。

以前に書いたnoteで解説していますが、

「車輪の再発明」はしてはいけない！


【使い方 1 】　ScrollReveal.js

まず、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>S.A.P.design</title>

<link rel="stylesheet" href="css/style.css">

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

</head>

これで、ScrollReveal.jsが使えます。

つまりは、「https://unpkg.com/scrollreveal」⇦ここに、

ScrollReveal.jsの難しいコードが、置いてあって、そこから

うちのhtmlファイルにそのコードを持ってきちゃってください！ってこと。

感謝の気持ちを持って使わせていただきましょうね。

これの仕組みを　CDN っていうから、覚えとくとググるとき楽！

【使い方 ２】　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ファイルの

一番下あたり。

<script> </script>で囲うことで、JavaScriptのコードなんだなと

認識してくれるのです！

で、

このコードの一行目

ScrollReveal().reveal('.scrollReveal',{　・・・・

「.scrollReveal」の部分は、class名です。

このclass名がついている要素に対して、ふんわり表示をさせてね！

という意味。

このclass名は自分で好きなものをつければOKです！


【使い方  3】　ふんわり表示させたい要素に、classをつける

ふんわり表示をさせたい箇所は、「About」っていう文字と

その下の、画像と、

その横の、文章でした。

ここね↓​

<!--About---------------------------------------------->
<section class="about">

 <h1 class="scrollReveal">About</h1>


 <div class="about-container scrollReveal">

   <img src="img/about-img.jpg" alt="about-img">


   <p>abcdefgabcdefgabcdefgabcdefgabcdefg</p>


 </div>

</section>

「About」の部分は、このコード

<h1 class="scrollReveal"> About </h1>


下の画像と、その横の文章（abcdefgabcdefgabcdefgabcdefgabcdefg）は、

このコード

<div class="about-container scrollReveal">

<img src="img/about-img.jpg" alt="about-img">

<p>abcdefgabcdefgabcdefgabcdefgabcdefg</p>

</div>


こんな感じで、<h1>に、「scrollReveal」と、class名をつけています

なので、さっきのJavaScriptのコードが、それを検知！

あの<h1>を、ふんわり表示させろ！と、命令を出してくれるわけですね！

ありがたいな〜！！


画像と、文章は、それも囲む<div>にclass名が付けられていますので、

その<div>ごと、ふんわり表示となるわけです！

この先は、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: 2000, // アニメーションの時間
viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
reset: false, // アニメーションを繰り返すか
distance: '50%', //表示された時に要素が移動する距離
scale: 1, //表示される前の要素のサイズ
delay: 500, //アニメーションが実行されるまでの時間
interval: 800, //各アニメーションの間隔
opacity: 0, //表示される前の不透明度
origin: 'bottom',//要素がどの方向から来るか
mobile:true //スマホで有効か

このあたりを、イジってみよう！！

書いてある通りで、durationでアニメーションが

完了する時間を長くすれば、ふんわり具合がゆっくりになる。

originで、ふわっと出てくるスタート地点を指定できる。

下からなら、bottom

上からなら、top

CSSと同じだね！

distanceの％を大きくすれば、めちゃめちゃ下から現れたりする。

scaleの数値は1を基準とするので、2とかにすると、大きな文字が画面に

出てきて、通常のサイズに戻るっていうアニメーションになる！


とにかく、色々いじってみて、理想のアニメーションを作ってみるのが

楽しいですね〜！

詳しくは、もっと素晴らしい方々の教えを、ググるのだ！（他力本願がモットーです）


【まとめ】

流れはこうです。

html 、cssを書く

<script src="https://unpkg.com/scrollreveal"></script>を <head>  </head>内に貼り付ける

<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>の上あたりに貼り付ける

class = "scrollReveal" を、ふわっと表示させたいところに書く

<h1 class="scrollReveal"> ふわっと表示 </h1>

<div class = "scrollReveal">  ・・・・</div>　とかね！

このclass名は、自由につけてください！


これで、こうなる　はず！

はい、手順通りやっても

思い通りにいかないのは、プログミング、マークアップです。

だからこそ、

イメージしたおりに、動いた時に、喜びがあるわけです！

つまり、プログラミング、マークアップは

ダクソです。死にゲーです！

絶対倒せへんやん！ゲール爺強すぎやろ！！ってなっても、

レベルを上げて、ステ振りし、装備を変えたり、工夫をしながら

幾度となく、挑むことで、勝てる！！

あの、勝った瞬間！の、感動と似てますな。

エルデンリングが22年1月発売とのことで、エヴァが完結し生きる意味を

見出せなかった、私の生きる意味が、できました。。。

楽しみすぎる。

話がそれましたが、

プログラミング、マークアップ

引き続き楽しんでまいります！



この記事が気に入ったらサポートをしてみませんか？