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:

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 應(yīng)用特效和動(dòng)畫
    }
});

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.

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // 應(yīng)用特效和動(dòng)畫
    }
});

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:

$(window).scroll(function() {
    if ($(this).width() <= 549 && $(this).height() <= 549 && $(this).scrollTop() > 600) {
        // 應(yīng)用特效
    } else if ($(this).width() > 549 && $(this).width() <= 991 && $(this).scrollTop() > 480) {
        // 應(yīng)用特效
    } else if ($(this).scrollTop() > 450) {
        // 應(yīng)用特效
    }
});

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.

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');
}

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:

if ($(window).scrollTop() > 60) {
    $('.banner h2').hide();
    $('.banner .info').show();
} else {
    $('.banner h2').show();
    $('.banner .info').hide();
}

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

if ($(window).width() <= 549) {
    if ($(window).scrollTop() > 600) {
        // 執(zhí)行的動(dòng)畫
        firstAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if ($(window).scrollTop() > 480) {
        // 執(zhí)行的動(dòng)畫
        firstAnimation();
    }
} else {
    if ($(window).scrollTop() > 450) {
        // 應(yīng)該執(zhí)行的動(dòng)畫
        firstAnimation();
    }
}

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!