HTML + CSS realisiert das Scrollen zur Elementposition, um den Ladeanimationseffekt anzuzeigen

Wie füge ich jedes Mal eine Ladeanimation hinzu, wenn ich zu einem Element scrolle?

Element, das Anfangsparameter hinzufügt

Nehmen Sie die Animation im obigen Bild als Beispiel, fügen Sie zwei linke und rechte Container hinzu und platzieren Sie den Inhalt in den Containern.

Fügen Sie Anfangsdaten mit einer Standardtransparenz von 0 und einer Bewegung von 100 Pixeln nach links und rechts hinzu.

//Linker Container.item-leftContainer {
    Deckkraft: 0;
    transformieren: übersetzenX(-100px);
  }
  //Rechter Container.item-rightContainer {
    Deckkraft: 0;
    transformieren: übersetzenX(100px);
  }

Hinzufügen von Animationsdaten

Fügen Sie Animationsdaten in weniger hinzu. Hier wird nur bis eingestellt. Sie können die anfängliche Parametereinstellung in Schritt 1 auch weglassen und in der Animation von einstellen.

Nach der Ausführung ändert sich die Transparenz von 0 auf 1 und die beiden Container verschieben sich 100px zur Mitte und kehren an ihre Ausgangspositionen zurück.

//Animation @keyframes showLeft {
    Zu {
      Deckkraft: 1;
      transformieren: übersetzenX(0px);
    }
  }
  @keyframes zeigenRechts {
    Zu {
      Deckkraft: 1;
      transformieren: übersetzenX(0px);
    }
  }
  @keyframes hideLeft {
    Zu {
      Deckkraft: 0;
      transformieren: übersetzenX(-100px);
    }
  }
  @keyframes hideRight {
    Zu {
      Deckkraft: 0;
      transformieren: übersetzenX(100px);
    }
  }

Auslösen einer Animation

Auslöser zum Laden/Aktualisieren der Seite – wird in componentDidMount ausgeführt

Wird ausgelöst, wenn die Seite gescrollt wird – fügen Sie Listener/Logouts für Seiten-Scroll-Ereignisse in componentDidMount und componentWillUnmount hinzu.

Überprüfen Sie den Unterschied zwischen der aktuellen Bildlaufhöhe und der Position des Elements:

window.pageYOffset (Scrolldistanz) + windowHeight (Fensterhöhe) > leftElement.offsetTop (relative Position des Elements) + parentOffsetTop (relative Position des übergeordneten Elements) + 200

• Echte visuelle Scrollposition – window.pageYOffset (Scrolldistanz) + windowHeight (Fensterhöhe)
• Die Höhe des Elements von oben – leftElement.offsetTop + parentOffsetTop – wird hier verwendet, da der übergeordnete Container die absolute Positionierung verwendet. Wenn es sich um ein normales Layout handelt, verwenden Sie die aktuelle Position des Elements leftElement.offsetTop
• Die zusätzliche Höhe von 200 dient der Optimierung des visuellen Erlebnisses. Die Animation wird ausgelöst, wenn die Höhe 200 überschreitet

Beim Scrollen der Seite nach unten wird die Anzeigeanimation ausgelöst, beim erneuten Scrollen der Seite nach oben wird die Ausblendanimation ausgelöst.

componentDidMount() {
        this.checkScrollHeightAndLoadAnimation();
        window.addEventListener('scroll', this.bindHandleScroll);
    }
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    bindHandleScroll = (Ereignis) => {
        this.checkScrollHeightAndLoadAnimation();
    }
    checkScrollHeightAndLoadAnimation() {
        const windowHeight = window.innerHeight;
        let parentEelement = document.getElementById("softwareUsingWays-container") als htmlElement;
        const parentOffsetTop = parentEelement.offsetTop;
        let leftElement = (parentEelement.getElementsByClassName("item-leftContainer") als htmlCollectionOf<HTMLElement>)[0];
        wenn (Fenster.SeitenYOffset + Fensterhöhe > linkesElement.OffsetTop + übergeordneterOffsetTop + 200) {
            leftElement.style.animation = "showLeft .6s vorwärts" //Animation hinzufügen} else {
            leftElement.style.animation = "hideLeft 0s vorwärts" //Animation ausblenden}
        let rightElement = (parentEelement.getElementsByClassName(".item-rightContainer") als HTMLCollectionOf<HTMLElement>)[0];
        wenn (Fenster.SeitenYOffset + Fensterhöhe > rechtesElement.OffsetTop + übergeordneterOffsetTop + 200) {
            rightElement.style.animation = "showRight .6s vorwärts" //Animation hinzufügen} else {
            rightElement.style.animation = "hideRight 0s vorwärts" //Animation ausblenden}
    }

Dies ist das Ende dieses Artikels über die Verwendung von HTML+CSS zum Scrollen zur Elementposition, um den Ladeanimationseffekt anzuzeigen. Weitere verwandte HTML-Ladeanimationsinhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder stöbern Sie weiter in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!