[Ruby on Rails] Animation de défilement facile de javascript (en utilisant ScrollReveal.js)

Cible

Environnement de développement

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Qu'est-ce que ScrollReveal.js?

https://scrollrevealjs.org/ Ceci est le site officiel.

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

 ScrollReveal est une bibliothèque JavaScript qui facilite l'animation d'un élément lorsqu'il entre et sort de la fenêtre.
 * Google Traduction

# couler
 1 Présentez ScrollReveal.js
 2 Modifier la vue
 3 Modifier le fichier js

# Présentez ScrollReveal.js

 ① Lors de la lecture avec CDN (recommandé)
 Dans la tête de application.html.erb

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

 Ajoutez cette ligne pour rendre ScrollReveal.js disponible.


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

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

② Lors du téléchargement d'un fichier https://github.com/jlmakes/scrollreveal Téléchargez le fichier zip à partir d'ici et téléchargez "scrollreveal.min.js" à l'intérieur. Enregistrez-le dans app / assets / javascripts. Après cela, <script src = "/ js / scrollreveal.min.js"> </ script> Ajoutez-le dans la tête ou en haut du fichier d'affichage.

Modifier la vue, CSS

Pour des raisons d'explication, décrivez css en html.

erb:app/views/homes/top.html.erb

<div class="page">
  <span>Veuillez faire défiler</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>

Modifier le fichier js

C'est la forme de base.

app/asstes/javascripts/application.js

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

Cela ressemble à ceci dans la forme de base. L'affichage est considérablement plus rapide car il est transformé en image gif, Comme vous pouvez le voir, il est difficile de voir s'il y a trop d'animation. Par conséquent, nous ajouterons des options.

Description de la vidéo dans la cible.

app/asstes/javascripts/application.js

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

Il est également possible d'ajouter des options comme celle-ci. L'option utilisée cette fois est

-duration: temps pour terminer l'animation --scale: la taille de l'élément avant son affichage --reset: active / désactive l'élément qui revient à la position initialisée en quittant la fenêtre

Parce qu'il existe diverses autres options disponibles Si vous êtes intéressé, veuillez consulter le site officiel. https://scrollrevealjs.org/api/delay.html

Résumé

La plupart des sites connus ont une sorte d'animation, Je pense que c'est obligatoire si vous voulez le créer à partir de maintenant. Cependant, si vous utilisez ce qui précède, il peut être introduit en quelques minutes, c'est donc recommandé.

De plus, sur Twitter, les technologies et les idées qui n'ont pas été téléchargées sur Qiita sont également téléchargées, donc Je vous serais reconnaissant si vous pouviez me suivre. Cliquez ici pour plus de détails https://twitter.com/japwork