Tutorial zur ersten Anzeige und Persistenz von Scrolltrigger -Inhalten

Dieses Tutorial löst das Problem, dass dynamischer Inhalte nicht vor dem Scrollen oder verschwinden nach dem Scrollen bei der Verwendung von Greensock Scrolltrigger nicht erscheint. Wir werden darauf eingehen, wie Sie sicherstellen, dass das erste Inhaltselement beim Laden der Seite sofort sichtbar ist, und zu diskutieren, wie sich die Toggleactions von Scrolltrigger auf die Persistenz von Inhalten während des Scrollens auswirkt. Durch die Optimierung der Animationsinitialisierung und das Verständnis des Triggerverhaltens können Sie reibungslosere und bessere Benutzererfahrungsanimationen erstellen.

Optimieren Sie die Bildlaufinhaltsanzeige: Ausgangszustand und Persistenz

Beim Erstellen von scrollgesteuerten Animationen mit Greensock Scrolltrigger besteht eine häufige Anforderung darin, sicherzustellen, dass bestimmte Inhalte sofort sichtbar sind, wenn die Seite nach dem Scrollen durch einen bestimmten Bereich sichtbar bleibt. Wenn der Ausgangszustand des Inhaltselements standardmäßig auf verborgen ist (z. B. Autoalpha: 0) und seine Anzeigeanimation an Scrolltrigger gebunden ist, wird der Inhalt erst angezeigt, wenn der Benutzer mit dem Scrollen beginnt. In ähnlicher Weise kann der Inhalt nach dem Scrollen durch den Triggerbereich wieder verschwinden, wenn die Umschaltungen der Animation nicht ordnungsgemäß eingestellt sind.

Problemanalyse: Erstes Verstecken und Verschwinden nach dem Scrollen

In dem angegebenen Beispielcode werden alle .Content -Elemente von gsap.set ('. Inhalt', {Autoalpha: 0}) initialisiert. Anschließend wird die Anzeigeanimation jedes Inhaltselements (.Content-I) (set (relevantContent, {Autoalpha: 1}, 0)) in einer Kleinigkeit verschachtelt und durch eine separate Scrolltrigger.Create-Instanz gesteuert. Diese eigenständigen Scrolltriggers verwenden Toggleactions: "Reverse Play Reverse".

Dieses Setup führt zu zwei Hauptproblemen:

1. Der erste Inhalt ist nicht sichtbar: Da alle Inhalte voreingestellt werden, um versteckt zu sein, und die Anzeigeanimation des ersten Inhalts nur beim Scrollen in seine Startposition abgespielt wird, ist der Bildschirm leer, wenn die Seite geladen wird und der Benutzer nicht scrollen.
2. Der Inhalt verschwindet nach dem Scrollen: Toggleactions: "Reverse Play Reverse" bedeutet:
   • ONENTER: Spielen Sie die Animation.
   • Onleave: spielt die Animation umgekehrt.
   • Onenterback: Die Animation spielen.
   • OnleaveBack: spielt die Animation umgekehrt. Dies bedeutet, dass beim Scrollen durch einen Auslöserbereich eines Inhaltselements der Inhalt angezeigt wird. Aber beim Scrollen aus diesem Bereich wird die Animation rückwärts spielen, was dazu führt, dass der Inhalt wieder versteckt wird. Dies steht im Widerspruch zu der Notwendigkeit, "den letzten Inhalt sichtbar zu halten".

Lösung 1: Stellen Sie sicher, dass der erste Inhalt ursprünglich sichtbar ist

Um das erste Problem zu lösen, dh das erste Inhaltselement angezeigt werden, wenn die Seite geladen wird, müssen wir seinen Anfangszustand klar außerhalb der Scrolltrigger -Animationslogik festlegen. GSAP -Animation ist deklarativ. Wenn der Anfangszustand eines Elements ausgeblendet ist, bleibt er versteckt, bis es eine Animationsanweisung gibt, um ihn zu ändern.

Am einfachsten ist es, seine Autoalpha -Eigenschaft vor allen Scrolltrigger- und Animationsdefinitionen oder zumindest vor der Smalltimeline des ersten Inhaltselements auf 1 zu setzen.

 // Erhalten Sie das erste Inhaltselement const FirstContentElement = document.querySelector ('div.Content-0');

// GSAP verwenden, um seine Sichtbarkeit sofort einzustellen gsap.set (FirstContentelement, {Autoalpha: 1});

// oder, wenn Sie es in der Animation anzeigen möchten (obwohl dies der Ausgangszustand ist, wird es normalerweise direkt festgelegt)
// gsap.timeline (). An (FirstContentElement, {Autoalpha: 1}, 0);

Setzen Sie diesen Code-Snippet nach gsap.set ('. Inhalt', {autoalpha: 0}), aber vor den Überschriften.foreach-Schleifen können Sie sicherstellen, dass der erste Inhalt (.content-0) sichtbar ist, bevor ein Bildlaufverhalten auftritt.

Optimiertes Beispiel für JavaScript -Code:

 // 1. Setzen Sie zunächst alles, um gsap.set ('. Inhalt', {Autoalpha: 0}) zu verbergen;

// 2. Stellen Sie sicher, dass der erste Inhalt sofort sichtbar ist, wenn die Seite const FirstContentelement = document.querySelector ('Div.Content-0') geladen wird.
if (FirstContentElement) {// Überprüfen Sie, ob das Element existiert, und erhöhen Sie die Robustheit gsap.set (FirstContentelement, {Autoalpha: 1});
}

var headlines = gsap.utils.toarray (". text");
var TotalDuration = 8000;
var singleduration = totalduration / hoks.length;

const linetimeline = gsap.timeline ();

Scrolltrigger.create ({{
    Auslöser: ".pin-up",
    Start: "Top Top",
    Ende: "=" TotalDuration,
    // Marker: True, // zum Debuggen, Pin entfernen: true,,
    Scrub: Richtig,
    Animation: Linetimeline,
});

Headlines.foreach ((Elem, i) => {
    const smalltimeline = gsap.timeline ();
    const content = document.querySelector ('. Content-Wrap');
    const relevantContent = content.querySelector ('div.Content-' i);

    Scrolltrigger.create ({{
        Auslöser: "Körper",
        Start: "Top -=" (Singleduration * i),
        Ende: "=" Singleduration,
        Animation: Smalltimeline,
        // 3.. Passen Sie die Toggleactions an, um die Persistenz des Inhalts zu kontrollieren // Wenn der Inhalt nach dem Durchsuchen der Einstellung sichtbar bleibt, können Sie diese Einstellung ändern // z.
        // oder, wenn alles sichtbar bleiben sollte, sind komplexere Logik oder unterschiedliche Toggleaktionen erforderlich
        Toggleactions: "Reverse Play Reverse", // Originaleinstellungen, lässt den Inhalt verschwinden});

    Smalltimine
        .to (Elem, {Dauer: 0,25, Farbe: "Orange"}, 0)
        .to (Elem.Firstchild, {Dauer: 0,25, HintergrundColor: "Orange", Breite: "50px"}, 0)
        .set (relevantContent, {Autoalpha: 1}, 0); // Inhalte zu Beginn der Timeline anzeigen});

Lösung 2: Halten Sie den letzten Inhalt langlebig und sichtbar

Um das zweite Problem zu lösen: "Halten Sie den letzten Inhalt nach dem Scrollen immer noch sichtbar", müssen wir den Mechanismus der Toggleaktionen verstehen. Das Standard -"Play Reverse Play Reverse" bewirkt, dass der Inhalt umgekehrte Animation ist und versteckt wird, wenn der Triggerbereich verlässt.

Wenn das Ziel darin besteht, alles sichtbar zu halten, nachdem es angezeigt wurde, oder wenn nur der letzte Inhalt sichtbar bleibt, gibt es mehrere Strategien:

1. Ändern Sie die Toggleactions:

   • Wenn Sie möchten, dass sie nach der Anzeige sichtbar bleiben, können Sie Toggleactions so einstellen, dass sie "keine nicht spielen". Dies bedeutet, dass die Animation beim Eintritt nur einmal gespielt wird und bei der Abreise nicht umgekehrt wird.
   • Wenn Sie nur möchten, dass der letzte Inhalt sichtbar bleibt, können Sie in den Schlagzeilen bedingte Urteile hinzufügen.

      Scrolltrigger.create ({{
         Auslöser: "Körper",
         Start: "Top -=" (Singleduration * i),
         Ende: "=" Singleduration,
         Animation: Smalltimeline,
         Toggleactions: (i === Überschriften.Length - 1)? "Play None Play None": "Play Reverse Play Reverse",
     });

     Hier "Play None Play None" bedeutet beim Betreten zu spielen, nichts zu tun, beim Ablassen zu spielen, wenn sie in die Rückseite eintreten und nichts tun, wenn sie umgekehrt abreisen. Dies stellt sicher, dass der letzte Inhalt nach dem Ende seines Triggerbereichs in seinem endgültigen Zustand bleibt (Autoalpha: 1).

2. Verwenden Sie keine Autoalpha: 0 FIRT HEIFEN SIE: Wenn der Inhalt überlagert ist und Sie möchten, dass sie angezeigt und einzeln enthält, können Sie in Betracht ziehen, Autoalpha: 0 global festzulegen. Machen Sie stattdessen jedes Inhaltselement standardmäßig sichtbar und verschieben Sie es dann aus dem Bildschirm oder ändern Sie seinen Stil. Für das Autoalpha -Szenario in diesem Beispiel ist das Ändern von Toggleactions jedoch direkter.

3. Kontrolle der Sichtbarkeit mit der Hauptzeitleiste: Für komplexere Szenarien können autoalpha -Steuerelemente für alle Inhalte in die Hauptzeitleiste integriert werden und präzise kontrolliert werden, um jeden Inhalt auf der Grundlage des Scrolling -Fortschritts anstatt sich auf mehrere unabhängige Scrolltrigger zu verlassen.

Zusammenfassung und Vorsichtsmaßnahmen

• Die anfängliche Statusverwaltung ist der Schlüssel: Alles, was sofort angezeigt werden muss, sollte in der anfänglichen Sichtbarkeit außerhalb der Scrolltrigger -Animationslogik über GSAP.set () oder direkt in CSS festgelegt werden.
• Toggleactions verstehen: Das Verständnis der vier Parameter von Toggleaktionen (ONenter, Onleave, Onenterback, OnleaveBack) ist entscheidend, um das Verhalten von Animationen bei Scrolling -Ereignissen genau zu steuern.
• Debugging -Tools: Während des Entwicklungsprozesses unter Verwendung von Markern: Richtig können Sie intuitiv den Auslöser und die Endpunkte von Scrolltrigger sehen, was für das Debuggen von Animationsverhalten sehr hilfreich ist.
• Leistungsüberlegungen: Obwohl die Animation in diesem Beispiel relativ einfach ist, sollte für komplexere scrollgesteuerte Animationen die Aufmerksamkeit geschenkt werden, um die Leistung zu optimieren, z. B. die Vermeidung von großen Mengen an DOM-Operationen oder teuren Berechnungen bei Scroll-Ereignissen.

Mit den oben genannten Methoden können Sie die Probleme der anfänglichen Anzeige und Persistenz von Inhalten im Scrolltrigger effektiv lösen und so ein Bildlaufanimationserlebnis erstellen, das eher den Erwartungen der Benutzer und den Designanforderungen entspricht.

Das obige ist der detaillierte Inhalt vonTutorial zur ersten Anzeige und Persistenz von Scrolltrigger -Inhalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!