Eine Einführung in JQuery Scroll-basierte Animationen

Kernpunkte

• scrollbasierte Animationen und Spezialeffekte sind eine Technologie, mit der Webentwickler dynamische und interaktive Weberlebnisse erstellen können. Sie werden ausgelöst, wenn der Benutzer auf der Seite scrolliert und mit CSS und JQuery manipuliert und implementiert werden kann.
• Um ansprechende scrollbasierte Effekte zu erzeugen, müssen die Breiten- und Höheneigenschaften des Browserfensters definiert werden. Ohne diese Eigenschaften funktionieren die Effekte nicht ordnungsgemäß, wenn der Benutzer das Fenster verändert.
• Dieses Tutorial enthält vier Beispiele für scrollbasierte Animationen und Effekte, die zeigen, wie sie basierend auf dem Wert des Attributs der Fensterbreite variieren. Diese Beispiele sind Animation von Deckkraft, Höhe, Breite, links, rechts und untere Eigenschaften verschiedener Elemente.
• Dieses Tutorial enthält auch einen FAQ -Abschnitt, in dem Lösungen für häufige Probleme wie das Erstellen von reibungslosen Scrolling -Effekten, das Erkennen von Scroll -Anweisungen und das Anhalten von JQuery -Animationen enthalten sind.

Die

Webseiten -Technologie ändert sich mit jedem Tag, wobei nacheinander neue Technologien und Techniken entstehen, und einige alte Technologien werden allmählich beseitigt. Daher müssen Webdesigner und Front-End-Entwickler mit vielen der neuesten Webdesign-Trends vertraut sein. Parallaxe Scrolling, fester Header, flaches Design, einseitige Websites und Animation sind derzeit einige der heißesten Webtrends.

In diesem Tutorial lernen wir mithilfe von CSS und JQuery, wie Sie scrollbasierte Animationen und Spezialeffekte erstellen.

Sie können auf diese Demo klicken, um die vier Spezialeffekte anzuzeigen, die wir erstellen werden. Bevor wir jedoch mit der Erklärung der Spezialeffekte beginnen, stellen wir sie kurz vor.

Hinweis: Der in diesem Tutorial verwendete Code kann durch das Caching von Objekten und die Verwendung von CSS -Animationen (anstelle von JQuery's animate() -Methode) verbessert werden, aber zum Einfachheit halber haben wir die Objektdeklaration wiederholt und alles für alles hineingefügt .

Was sind scrollbasierte Animationen und Spezialeffekte?

scrollbasierte Animationen und Spezialeffekte sind ein neuer und bekannter Ansatz, mit dem Front-End-Entwickler reichhaltige und interaktive Weberlebnisse erstellen können. Sie werden ausgelöst, wenn der Benutzer auf der Seite scrolliert und mit CSS und JQuery leicht manipuliert und implementiert werden kann.

Um festzustellen, ob der Benutzer auf der Seite scrollt, verwenden wir das scroll () -Event von JQuery.

Sobald wir wissen, dass der Benutzer scrollt, können wir die scrolltop () -Methode von JQuery verwenden, um die vertikale Position der Fenster -Scrollbar zu erhalten und die erforderlichen Spezialeffekte anzuwenden:

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});</code>

reagieren sie?

Wenn wir reaktionsschnelle scrollbasierte Effekte erstellen möchten, müssen wir die folgenden Eigenschaften definieren:

1. Breite Eigenschaft des Browserfensters.
2. Höheneigenschaften des Browserfensters.

Wenn diese Eigenschaften nicht definiert sind, werden wir "statische" scrollbasierte Effekte erstellen, die nicht ordnungsgemäß funktionieren, wenn der Benutzer das Fenster horizontal oder vertikal verändert.

Wir können die Werte dieser Eigenschaften mit der Breite von JQuery () und der Höhe () und Height () leicht abrufen.

Das folgende Code-Snippet zeigt alle erforderlichen Überprüfungen, die berücksichtigt werden müssen, um scrollbasierte Effekte zu erstellen.

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 应用特效和动画
    }
});</code>

Jetzt, da wir die Grundlagen von Scrolling -Effekten eingeführt haben, schauen wir sie uns mit vier verschiedenen Beispielen an.

Hinweis: Der Einfachheit halber konzentrieren wir uns nur darauf, wie diese Effekte je nach den verschiedenen Werten des Attributs der Fensterbreite variieren. Der gleiche Vorgang kann auch für die Höheneigenschaften des Fensters verwendet werden.

Beispiel #1

Dieser Effekt wird ausgelöst, wenn die obere Position der Fenster -Scroll -Stange 60px überschreitet. In diesem Fall lautet das ausgeführte Code -Snippet wie folgt:

<code class="language-javascript">$(window).scroll(function() {
    if ($(this).width() <= 549 && $(this).height() <= 549 && $(this).scrollTop() > 600) {
        // 应用特效
    } else if ($(this).width() > 549 && $(this).width() <= 991 && $(this).scrollTop() > 480) {
        // 应用特效
    } else if ($(this).scrollTop() > 450) {
        // 应用特效
    }
});</code>

Der obige Code verbirgt das untergeordnete Element des

untergeordneten Elements .banner und zeigt sein ursprünglich verborgenes untergeordnetes Element. h2 .info Dieser Code kann auch so geschrieben werden:

Um diesen Effekt in Aktion anzuzeigen, lesen Sie die vollständige Demo auf CodePen.

<code class="language-javascript">if ($(window).scrollTop() > 60) {
    $('.banner h2').css('display', 'none');
    $('.banner .info').css('display', 'block');
} else {
    $('.banner h2').css('display', 'block');
    $('.banner .info').css('display', 'none');
}</code>

Beispiel #2

Der nächste Spezialeffekt hängt nicht nur von der oberen Position der Browser -Scrollbar, sondern auch von der Breite des Fensters ab. Insbesondere haben wir folgende Annahmen getroffen:

Der Wert des Breitenattributs des Fensters beträgt weniger oder gleich 549px. In diesem Fall wird die Animation nur ausgelöst, wenn die obere Position der Fenster -Scroll -Leiste 600 PX überschreitet.

1. Der Wert des Breitenattributs des Fensters liegt zwischen 550px und 991px. In diesem Fall wird die Animation nur ausgelöst, wenn die obere Position der Fenster -Scroll -Stange 480px überschreitet.
2. Der Wert des Breitenattributs des Browsers ist größer als 991px. In diesem Fall wird die Animation nur ausgelöst, wenn die obere Position der Fenster -Scroll -Stange 450px überschreitet.
Die obige Annahme führt zum folgenden Code -Snippet:

Der Code, der die zu ausgeführte Animation enthält, lautet wie folgt:

<code class="language-javascript">if ($(window).scrollTop() > 60) {
    $('.banner h2').hide();
    $('.banner .info').show();
} else {
    $('.banner h2').show();
    $('.banner .info').hide();
}</code>

Der obige Code animiert Deckkraft, Höhe und Breite für

<code class="language-javascript">if ($(window).width() <= 549) {
    if ($(window).scrollTop() > 600) {
        // 执行的动画
        firstAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if ($(window).scrollTop() > 480) {
        // 执行的动画
        firstAnimation();
    }
} else {
    if ($(window).scrollTop() > 450) {
        // 应该执行的动画
        firstAnimation();
    }
}</code>

Elemente.

.clients-info Um diesen Effekt in Aktion anzuzeigen, lesen Sie die vollständige Demo auf CodePen.

(nachfolgende Beispiele 3 und 4 sowie die Schlussfolgerung und FAQ Satzstrukturen.)

Denken Sie daran, das ursprüngliche Format und die Position des Bildes zu halten.

Das obige ist der detaillierte Inhalt vonEine Einführung in JQuery Scroll-basierte Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!