[Ruby on Rails] Easy scroll animation of javascript (using ScrollReveal.js)

Target

Development environment

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

What is ScrollReveal.js?

https://scrollrevealjs.org/ This is the official website.

`ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the viewport.`


 ScrollReveal is a JavaScript library that makes it easy to animate an element as it enters and exits the viewport.
 * Google translate

# flow
 1 Introduce ScrollReveal.js
 2 Edit view
 3 Edit js file

# Introduce ScrollReveal.js

 ① When reading with CDN (recommended)
 In the head of application.html.erb

#### **`//unpkg.com/scrollreveal">`**
```<script src="https

 Add this line to make ScrollReveal.js available.


#### **`erb:app/views/layouts/application.html.erb`**

Ddtt <%= csrf_meta_tags %> <%= csp_meta_tag %>

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

```

② When downloading a file https://github.com/jlmakes/scrollreveal Download the zip file from here and download "scrollreveal.min.js" inside. Save it in app / assets / javascripts. After that, ```

Recommended Posts

[Ruby on Rails] Easy scroll animation of javascript (using ScrollReveal.js)

Try using the query attribute of Ruby on Rails

Basic knowledge of Ruby on Rails

[Rails] Addition of Ruby On Rails comment function

[Ruby on Rails] Code check using Rubocop-airbnb

Let's summarize "MVC" of Ruby on Rails

Notes on using FCM with Ruby on Rails

[Ruby on Rails] Image slideshow using Skippr

[Ruby on Rails] Japanese notation of errors

Explanation of Ruby on rails for beginners ①

[Ruby on rails] Implementation of like function

[Ruby On Rails] How to search the contents of params using include?

Implementation of Ruby on Rails login function (Session)

[Ruby on Rails] Until the introduction of RSpec

Recommendation of Service class in Ruby on Rails

Ruby on Rails ~ Basics of MVC and Router ~

[Ruby on Rails] A memorandum of layout templates

[Ruby on Rails] Individual display of error messages

Ruby on Rails Elementary

Ruby on Rails basics

Ruby On Rails Association

Ruby on Rails <2021> Implementation of simple login function (form_with)

[Ruby on Rails] Asynchronous communication of posting function, ajax

Implementation of Ruby on Rails login function (devise edition)

Docker the development environment of Ruby on Rails project

[Ruby on Rails] Implementation of tagging function/tag filtering function

[Ruby on Rails] Common processing between controllers (using concaves)

Ruby on Rails environment construction using VirtualBox, Vagrant, cyberduck

Explanation of Ruby on rails for beginners ⑥ ~ Creation of validation ~

Explanation of Ruby on rails for beginners ② ~ Creating links ~

Explanation of Ruby on rails for beginners ⑦ ~ Flash implementation ~

Ruby on rails learning record -2020.10.03

Portfolio creation Ruby on Rails

Ruby on Rails Email automatic sending function setting (using gmail)

Ruby on rails learning record -2020.10.04

[Ruby on Rails] Debug (binding.pry)

Ruby on rails learning record -2020.10.05

Ruby on rails learning record -2020.10.09

Ruby on Rails config configuration

Ruby on Rails for beginners! !! Summary of new posting functions

[Procedure 1 for beginners] Ruby on Rails: Construction of development environment

[Ruby on Rails] Elimination of Fat Controller-First, logic to model-

[Ruby on Rails] about has_secure_password

(Ruby on Rails6) Display of the database that got the id of the database

Delete all the contents of the list page [Ruby on Rails]

A note about the seed function of Ruby on Rails

[Ruby on Rails] Carousel of bootstrap4 is implemented as a slide show using each method.

Commentary on partial! --Ruby on Rails

Ruby on rails learning record-2020.10.07 ①

Cancel Ruby on Rails migration

Explanation of Ruby on rails for beginners ③ ~ Creating a database ~

Ruby on rails learning record -2020.10.06

Ruby on Rails validation summary

Ruby on Rails Basic Memorandum

[Ruby on Rails] Infinite scrolling using gem kaminari and jscroll

Create a large number of records with one command using the Ruby on Rails seeds.rb file

[Ruby on Rails] Change the save destination of gem refile * Note

Explanation of Ruby on rails for beginners ⑤ ~ Edit and delete database ~

Erase N + 1 in acts_as_tree of tree structure Gem of Ruby on Rails

[Ruby on Rails] "|| =" ← Summary of how to use this assignment operator

Ruby on Rails Overview (Beginner Summary)