目標
開発環境
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を使用できるようにします。
<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を記述します。
<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ファイルの編集
こちらが基本の形。
$(function(){
ScrollReveal().reveal('.box');
});
基本形だとこのようになります。
gif画像にした分表示がかなり早くなっていますが、
ご覧の通りあまりアニメーションがあるかどうかは確認しにくいです。
したがってオプションを付けていきます。
目標にある動画の記述。
$(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