Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt

Velocity.js implementiert den Seiten-Scrolling-Umschalteffekt

Heute werde ich ein kleines Javascript-Animations-Plugin namens velocity.js vorstellen, mit dem sich einfach und effizient eine Website mit mehrseitigen Scroll-Umschalteffekten entwickeln lässt.

Browserunterstützung

velocity.js unterstützt Browser wie IE8+, Chrome, Firefox und unterstützt Android und iOS.

Wir entwickeln ein Projekt mit einer großen Anzahl verwandter Seiten. Wenn wir sie nicht alle auf einer Seite anzeigen können, aber den relevanten Inhalt effektiv lesen möchten, können wir dies durch die Erstellung einiger interessanter Effekte erreichen. Durch die Verwendung des Seiten-Scroll-Umschalteffekts können wir effektiv eine auffällige Webseite erstellen.

Alle Spezialeffekte werden durch Velocity.js angewendet. Velocity.js ist ein jQuery-Plugin zum Umschalten von Animationen. Es implementiert die jQuery-Methode jQuery.animate() neu, um das Umschalten von Animationen zu beschleunigen. Velocity.js ist nur 7 KB groß. Es enthält nicht nur alle Funktionen von jQuery.animate(), sondern auch Farbwechsel, Transformation, Looping, Easing, CSS-Umschaltung und Scroll-Funktionen. Es ist die beste Kombination aus jQuery, jQuery UI und CSS-Transformation in der Animation. Velocity.js verwendet in seiner internen Implementierung die jQuery.queue()-Methode von jQuery, sodass es flüssiger läuft als die jQuery-Methoden jQuery.animate(), jQuery.fade() und jQuery.delay() und auch die Leistung ist höher als die der Animationseigenschaft von CSS.

Nicht alle Effekte sind auf kleinen Endgeräten, wie Mobiltelefonen oder Smartwatches, darstellbar. Daher ist es am besten, seine Funktionen im Web anzuzeigen, aber wir haben auch entsprechende Anpassungen für kleine Terminals vorgenommen, um das Surfen zu erleichtern.

Wichtige Punkte

velocity.js ist ein Animations-Plugin für jQuery, das schnellere und effizientere Animationswechseleffekte bietet
Am 3. Mai 2014 veröffentlichte Julian velocity.js auf seinem GitHub
velocity.js ist ein kleines, aber leistungsstarkes Plugin

-

Als nächstes werden wir die spezifische Implementierungsmethode untersuchen

Um Animationen und Bildlaufeffekte anzuwenden, müssen wir die Einstellungen für Datenentführung und Datenanimation im Tag anpassen, um diese Funktion zu erreichen.

<body data-hijacking="aus" data-animation="scaleDown">

Der obige Code bedeutet, dass der Startanimationseffekt data-animation proportional herunterskaliert wird. data-animation definiert insgesamt 7 verschiedene Animationseffekte, nämlich scaleDown, rotate, fixed, gallery, parallax, opacity, catch. Wir können jeden Effekt nach unseren Bedürfnissen anwenden. Und ich habe 7 Seiten Beispielcode erstellt, um die jeweiligen Auswirkungen zu zeigen. Schalten Sie das Attribut „Datenentführung“ aus. Sie können es auch einschalten, um die Wirkung zu zeigen. Die beiden obigen Eigenschaften stammen aus velocity.js

Dom-Struktur in HTML

In dieser Struktur wollen wir 5 verschiedene Seitengruppen darstellen. Wir unterteilen sie in fünf Bereiche und definieren 2 Icon-Buttons zum Umschalten.

<body data-hijacking="aus" data-animation="scaleDown">
    <Abschnitt Klasse="cd-Abschnitt sichtbar">
        <div><h2>Seiten-Scroll-Umschalteffekt 1</h2></div>
    </Abschnitt>
    <Abschnittsklasse="cd-Abschnitt"><div>
            <h2>Seiten-Scroll-Umschalteffekt 2</h2></div>
    </Abschnitt>
    <Abschnitt Klasse="cd-Abschnitt">
        <div><h2>Seiten-Scroll-Umschalteffekt 3</h2></div>
    </Abschnitt>
    <Abschnitt Klasse="cd-Abschnitt">
        <div><h2>Seiten-Scroll-Umschalteffekt 4</h2></div>
    </Abschnitt>
    <Abschnitt Klasse="cd-Abschnitt">
        <div><h2>Seiten-Scroll-Umschalteffekt 5</h2></div>
    </Abschnitt>
    <Navigation>
        <ul Klasse="cd-vertical-nav">
            <li><a href="#0" class="cd-prev inactive">Weiter</a></li>
            <li><a href="#0" class="cd-next">Zurück</a></li>
        </ul>
    </nav> <!-- .cd-vertical-nav -->
</body>

CSS-Stil hinzufügen

Durch die Gestaltung des Stils jedes Abschnitts ist es für uns bequem, ihn anzuzeigen und zu interagieren. Sie können einige entsprechende Stile entsprechend Ihren Anforderungen erstellen.

.cd-Abschnitt:Erster-vom-Typ > div {
  Hintergrundfarbe: #2b334f;
}
.cd-Abschnitt:n-ter-Typ(2) > div {
  Hintergrundfarbe: #2e5367;
}
.cd-Abschnitt:n-ter-Typ(3) > div {
  Hintergrundfarbe: #267481;
}
.cd-Abschnitt:n-ter-Typ(4) > div {
  Hintergrundfarbe: #fcb052;
}
.cd-Abschnitt:n-ter-Typ(5) > div {
  Hintergrundfarbe: #f06a59;
}

js Ereignisbehandlung

Wenn wir das Data-Hijacking-Attribut auf „Aus“ setzen, werden alle Animationseffekte entsprechend der relativen Position ihres Fensters skaliert. Wenn das Animationsereignis ausgelöst wird, passen wir den Stil der aktuellen Fensterseite an, einschließlich des Zoomverhältnisses von klein nach groß oder von groß nach klein. Und Erläuterung der damit verbundenen Transparenzänderungen.

Der folgende Code wird weiter unten ausführlich erklärt. Zunächst einmal bezieht sich windowHeight auf die Höhe Ihres Gerätefensters selbst, die ein fester Wert ist. jQuery(window).scrollTop() ist die Höhe der Bildlaufleiste auf der Seite. Es ist ein Bereichswert beim Gleiten von oben nach unten (0 bis alle Seitenhöhen) und beim Gleiten von unten nach oben (von allen Seitenhöhen bis 0). actualBlock.offset().top ist eine Reihe von festen Werten, die den Abstand von jeder Abschnittsseite zum oberen Rand darstellen (0, jede Seitenhöhe, jede Seitenhöhe * 2, jede Seitenhöhe * 3 ...). Die Höhe jeder Seite hängt vom Gerät ab. Nachdem wir die Bedeutung dieser Codes verstanden haben, können wir die folgende Beurteilungsaussage sehen: Wenn der Versatzwert größer als die negative Fensterhöhe ist, d. h. beim Gleiten von unten nach oben, wechselt die aktuelle Seite von groß auf klein und die Transparenz ändert sich nicht. Der Wert der Y-Achse steigt weiter an und die Seite verlässt allmählich das aktuelle Ansichtsfenster. Wenn der Versatzwert kleiner als die Fensterhöhe ist, d. h. beim Gleiten von oben nach unten, wechselt die aktuelle Seite von klein auf groß und die Transparenz wird allmählich transparent, der Wert der Y-Achse ist Null und es wird eine Skalierung durchgeführt. Schattenunschärferadius geändert.

//actualBlock ist der Abschnitt, den wir animieren
var offset = $(window).scrollTop() - tatsächlicherBlock.offset().top,
    Fensterhöhe = $(window).height();

wenn( Offset >= -windowHeight und Offset <= 0 ) {
    // Abschnitt, der in das Ansichtsfenster eintritt
       verschiebeY = (-Offset)*100/Fensterhöhe;
       Maßstab = 1;
      Deckkraft = 1;
} sonst wenn( Offset > 0 und Offset <= Fensterhöhe ) {
    //Abschnitt, der das Ansichtsfenster verlässt 
       Skalierung = (1 – (Versatz * 0,3 / Fensterhöhe));
    Deckkraft = (1 – (Versatz / Fensterhöhe));
    versetzeY = 0;
    boxShadowBlur = 40*(Versatz/Fensterhöhe);
}

Nachdem die oben genannten Ereignisse verarbeitet wurden, gibt es zwei weitere Klickereignisse. Klicken Sie auf die beiden Umschalttasten, um die Seiten direkt zu wechseln. Es gibt auch Ereignisverarbeitungsfunktionen von Velocity.js, z. B. einige Effekte für Animationseffekte wie TranslateUp, TranslateDown, ScaleDown usw.

$.Geschwindigkeit
    .RegisterEffect("scaleDown", {
        Standarddauer: 800,
        Anrufe: [ 
            [ { Deckkraft: '0', Maßstab: '0,7', BoxShadowBlur: '40px' }, 1]
        ]
    });

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • js realisiert einen nahtlosen Scroll-Doppelbild-Umschalteffekt
  • JS realisiert den Effekt des Etiketten-Scrolling-Umschaltens
  • js, um den Effekt des Scrollens mit dem Mausrad zum Wechseln der Seiten zu erzielen (ähnlich dem standardmäßigen Seiten-Scrollen-Umschalteffekt von 360)
  • js + div, um Code für Text-Scrolling- und Bildwechseleffekte zu erzielen
  • js steuert mehrere Bilder, um nach links und rechts zu scrollen und den Effektcode-Sharing zu wechseln
  • Eine weitere Idee für den Bild-Scroll-Umschalteffekt in Javascript
  • Einfache Implementierung der JS-Seitenwechselfunktion
  • js implementiert zwei Sätze von CSS-Umschaltcode für eine einzelne HTML-Seite
  • Beispiel einer JS-Dateninteraktionsmethode zum Wechseln zwischen vier Diagrammen auf derselben E-Charts-Seite

<<:  Beispiel für die Implementierung eines gestrichelten Rahmens mit html2canvas

>>:  Aktivieren Sie OCSP, um die Effizienz der https-Zertifikatsüberprüfung zu verbessern und das Problem des langsamen Zugriffs auf Let’s Encrypt SSL-Zertifikate zu lösen

Artikel empfehlen

Lösung für den Netzwerkfehler beim Installieren der Workstation in einer virtuellen Maschine in ESXI

Problembeschreibung Nach der Installation von Wor...

Leitfaden zum Schreiben von HTML-Code

Gängige Konventions-Tags Selbstschließende Tags, ...

So installieren Sie mysql5.6 in Docker unter Ubuntu

1. Installieren Sie mysql5.6 Docker führt MySQL a...

So führen Sie ein Projekt mit Docker aus

1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...

WEB Standard-Webseitenstruktur

Ob es sich nun um das Hintergrundbild oder die Tex...

So teilen und führen Sie mehrere Werte in einem einzigen Feld in MySQL zusammen

Mehrere Werte kombiniert anzeigen Nun haben wir d...

Detailliertes Tutorial zur Installation von MySQL 8.0.19 in der Zip-Version unter Win10

Inhaltsverzeichnis 1. Nach dem Download entpacken...

Konfigurationsskript für den automatischen Ausgleich von Nginx-Cache-Dateien und dynamischen Dateien

nginx Nginx (Engine x) ist ein leistungsstarker H...

Einfaches Tutorial zu den Firewall-Einstellungen unter Ubuntu 20.04 (Anfänger)

Vorwort In der heutigen, immer bequemeren Interne...

Gemeinsame MySQL-Testpunkte für die Computerprüfung der zweiten Stufe 8 Methoden zur Optimierung des MySQL-Datenbankdesigns

8 Optimierungsmethoden für das MySQL-Datenbankdes...

Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js

Nachfrage: Diese Nachfrage ist ein dringender Bed...

Details zur JS-Array-Deduplizierung

Inhaltsverzeichnis 1 Testfälle 2 JS-Array-Dedupli...

Zwei Möglichkeiten zum Schreiben gespeicherter Prozeduren in MySQL mit und ohne Rückgabewerte

Vorgang 1: mit Rückgabewert: Prozedur löschen, fa...

Spezifische Verwendung des Node.js-Paketmanagers npm

Inhaltsverzeichnis Zweck npm init und package.jso...

Eine kurze Zusammenfassung der grundlegenden Regeln zur Leistungsoptimierung von Webseiten

Einige Optimierungsregeln für Browser-Webseiten S...