[Ruby on Rails] Einfache Scroll-Animation von Javascript (mit ScrollReveal.js)

Ziel

Entwicklungsumgebung

ruby 2.5.7 Rails 5.2.4.3 OS: macOS Catalina

Was ist ScrollReveal.js?

https://scrollrevealjs.org/ Dies ist die offizielle Website.

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

 ScrollReveal ist eine JavaScript-Bibliothek, mit der ein Element beim Betreten und Verlassen des Ansichtsfensters einfach animiert werden kann.
 * Google Übersetzung

# fließen
 1 Führen Sie ScrollReveal.js ein
 2 Ansicht bearbeiten
 3 Bearbeiten Sie die js-Datei

# Führen Sie ScrollReveal.js ein

 ① Beim Lesen mit CDN (empfohlen)
 Im Kopf von application.html.erb

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

 Fügen Sie diese Zeile hinzu, um ScrollReveal.js verfügbar zu machen.


#### **`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' %>

② Beim Herunterladen einer Datei https://github.com/jlmakes/scrollreveal Laden Sie die Zip-Datei von hier herunter und laden Sie "scrollreveal.min.js" herunter. Speichern Sie es in App / Assets / Javascripts. Danach `` <script src =" / js / scrollreveal.min.js "> </ script> ` Fügen Sie dies im Kopf oder oben in der Anzeigedatei hinzu.

Ansicht bearbeiten, CSS

Beschreiben Sie zur Erläuterung CSS in HTML.

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

<div class="page">
  <span>Bitte scrollen</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-Datei bearbeiten

Dies ist die Grundform.

app/asstes/javascripts/application.js

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

In der Grundform sieht es so aus. Die Anzeige ist erheblich schneller, da sie in ein GIF-Bild umgewandelt wird. Wie Sie sehen können, ist es schwer zu erkennen, ob zu viele Animationen vorhanden sind. Daher werden wir Optionen hinzufügen.

Beschreibung des Videos im Ziel.

app/asstes/javascripts/application.js

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

Es ist auch möglich, solche Optionen hinzuzufügen. Die diesmal verwendete Option ist

-Dauer: Zeit, um die Animation abzuschließen --scale: Die Größe des Elements, bevor es angezeigt wird --reset: Aktiviert / deaktiviert das Element, das beim Verlassen des Ansichtsfensters an die initialisierte Position zurückkehrt

Weil es verschiedene andere Optionen gibt Wenn Sie interessiert sind, besuchen Sie bitte die offizielle Website. https://scrollrevealjs.org/api/delay.html

Zusammenfassung

Die meisten bekannten Websites haben eine Art Animation, Ich denke, es ist obligatorisch, wenn Sie es von nun an erstellen möchten. Wenn Sie jedoch das oben genannte verwenden, kann es in wenigen Minuten eingeführt werden, daher wird es empfohlen. "

Auf Twitter werden auch Technologien und Ideen hochgeladen, die nicht auf Qiita hochgeladen wurden Ich wäre Ihnen dankbar, wenn Sie mir folgen könnten. Klicken Sie hier für Details https://twitter.com/japwork