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ützungvelocity.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 - 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 HTMLIn 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ügenDurch 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:
|
<<: Beispiel für die Implementierung eines gestrichelten Rahmens mit html2canvas
Artikel empfehlen
So implementieren Sie eine Paging-Abfrage in MySQL
SQL-Paging-Abfrage:Hintergrund Im System des Unte...
Fassen Sie die häufigsten Anwendungsprobleme von XHTML-Code zusammen
Im Laufe der Zeit habe ich festgestellt, dass vie...
jQuery verwendet das Canvas-Tag, um den Bestätigungscode zu zeichnen
Das <canvas>-Element ist für clientseitige ...
HTML-Tabellen-Tag-Tutorial (26): Zellen-Tag
Die Attribute des <TD>-Tags werden verwende...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.24
In diesem Artikel finden Sie das Installations- u...
HTML-Tutorial: Das Optgroup-Element verstehen
Wählen Sie die Kategorieauswahl. Nach Tests könne...
MySQL-Variablendeklaration und Analyse gespeicherter Prozeduren
Deklarieren von Variablen Festlegen globaler Vari...
Detaillierte grafische Beschreibung des Datenbankinstallationsprozesses der MySQL-Version 5.7.24
MySQL ist das beliebteste relationale Datenbankma...
Code zum Anzeigen des Inhalts eines TXT-Buchs auf einer Webseite
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
So verwenden Sie Vue zum Entwickeln öffentlicher Account-Webseiten
Inhaltsverzeichnis Projekthintergrund Start Erste...
Detailliertes Tutorial zur Installation von Nginx auf CentOS8 (Bild und Text)
Nginx, ausgesprochen „Engine x“, ist ein Open Sou...
MySQL-Datenbank Daten laden, vielfältige Verwendungsmöglichkeiten
Inhaltsverzeichnis Vielfältige Einsatzmöglichkeit...
Implementierung der kollaborativen Nutzung von React-Komponenten
Inhaltsverzeichnis Verschachtelung Kommunikation ...
So legen Sie den Standardwert eines MySQL-Felds fest
Inhaltsverzeichnis Vorwort: 1. Standardwertbezoge...
Die umfassendste Erklärung des Sperrmechanismus in MySQL
Inhaltsverzeichnis Vorwort Globale Sperre Vollstä...