目標

開発環境

ruby 2.5.7
Rails 5.2.4.3
OS: macOS Catalina

ScrollReveal.jsとは

https://scrollrevealjs.org/
こちらが公式サイトにはなります。
ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport.
ScrollRevealは、要素がビューポートに出入りするときに要素を簡単にアニメーション化するためのJavaScriptライブラリです。
※google翻訳

流れ

1 ScrollReveal.jsを導入する
2 viewの編集
3 jsファイルの編集

ScrollReveal.jsを導入する

①CDNで読み込む場合（おすすめ）
application.html.erbのhead内に
<script src="https://unpkg.com/scrollreveal">
この一行を追加し、ScrollReveal.jsを使用できるようにします。

app/views/layouts/application.html.erb

<head>
  <title>Ddtt</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  <script src="https://unpkg.com/scrollreveal"></script>
</head>

②ファイルをダウンロードする場合
https://github.com/jlmakes/scrollreveal
こちらからzipファイルダウンロードするし、中にある「scrollreveal.min.js」を
app/assets/javascripts内に保存します。
その後、<script src="/js/scrollreveal.min.js"></script>
こちらをhead内または表示ファイルの一番上に追加してください。

view,CSSの編集

説明のため、html内にcssを記述します。

app/views/homes/top.html.erb

<div class="page">
  <span>スクロールしてください</span>
</div>

<div class="page">
  <div class="box"></div>
</div>

<style>
.page {
  position: relative;
  height: 100vh;
}
.box {
  width: 500px;
  height: 200px;
  background-color: red;
}
</style>

jsファイルの編集

こちらが基本の形。

app/asstes/javascripts/application.js

$(function(){
  ScrollReveal().reveal('.box');
});

基本形だとこのようになります。

gif画像にした分表示がかなり早くなっていますが、
ご覧の通りあまりアニメーションがあるかどうかは確認しにくいです。
したがってオプションを付けていきます。

目標にある動画の記述。

app/asstes/javascripts/application.js

$(function(){
  ScrollReveal().reveal('.box', { 
    duration: 2000, 
    scale: 4,
    reset: false
  });
});

このようにオプションを追加することも可能です。
今回使用したオプションは

duration：アニメーションの完了にかかる時間
scale：表示される前の要素のサイズ
reset：viewportを離れる時に初期化された位置に戻る要素を有効/無効にする

その他にも様々なオプションが用意されているため、
興味のある方は公式サイトをご覧ください。
https://scrollrevealjs.org/api/delay.html

まとめ

ほとんどの有名サイトにはなにかしらのアニメーションが付与されており、
今から作成する場合は必須になっていると思います。
ただし、上記を活用すれば数分で導入できるのでおすすめです」。

またtwitterではQiitaにはアップしていない技術や考え方もアップしていますので、
よければフォローして頂けると嬉しいです。
詳しくはこちら　https://twitter.com/japwork

【Ruby on Rails】javascriptのお手軽スクロールアニメーション（ScrollReveal.js使用）

目標

開発環境

ScrollReveal.jsとは

流れ

ScrollReveal.jsを導入する

view,CSSの編集

jsファイルの編集

まとめ