はじめに

スクロールをした時に指定の要素やテキストなどにアクションを加えて動かすことができるScrollReveal()です。hpやportfolioなどの作成する時簡単にできてしまうので実践してみて下さい。

方法

まず、プロジェクト中のディレクトリにファイルをインストールします。

https://github.com/jlmakes/scrollreveal
githubからインストールすることが可能です↑

npm install scrollreveal

今回使用するhtmlなどが入ったディレクトリにターミナルもしくはコマンドにてインストールします。

以下がサンプルの関数です。
各機能の説明を軽く載せています。
数値は適当なので自分の目的に合わせて下さい！

sample.js

ScrollReveal().reveal('class名',{
      origin:'right', <!--//アニメーションの始まりの場所、top,right,bottom,leftで指定ます-->
      distance: '100px', <!--//要素が表示するときに公式の場所まで移動する距離、pxやem、％、vwで指定します-->
      scale:'0.5', <!--//表示される前の要素のサイズ、1で100%の大きさです-->
      rotate:{x:0, y:0, z:0}, <!--//-->
      duration: 1200, <!--//アニメーションがどのように遷移するか（ease or ease-in等）-->
      delay:500, <!--//アニメーションが実行されるまでの時間（ミリ秒単位）-->
      opacity:0.5, <!--//０〜１で指定。数が小さくなるにつれて透明になります。-->
      mobile:true or false <!--//携帯端末でも対応させるかどうか-->
    }); <!--//その他に沢山あります。scrollrevealで検索してみて下さい。-->

今回わかりやすくするためにhtmlにjavascriptを記入しています。
以下を実行してみると、文字が右から流れて来るようになっています。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>How to use ScrolleReveal.</title>
    <script src="./js/scrollreveal.min.js"></script>
  </head>

  <body>
    <div class="lesson">
      <p>Hello World</p>
    </div>

    <script type="text/javascript">
    ScrollReveal().reveal('.lesson',{
      origin:'right',
      distance: '100px', 
      scale:'0.5',
      rotate:{x:0, y:0, z:0},
      duration: 1200, 
      delay:500
    });
    </script>
  </body>
</html>

とっても簡単にできましたね。
覚えるためにはとにかく手を動かし、実行するのみですね。
頑張っていきましょう！

参考文献は以下のhpです。
参考させていただきありがとうございます。
https://github.com/jlmakes/scrollreveal
ttps://scrollrevealjs.org/

ScrollReveal()を簡単に使う！要素・文字・画像にアクションを。

はじめに

方法