Heim  >  Fragen und Antworten  >  Hauptteil

Scroll-Fortschrittsanimation

Ich muss wissen, wie man den Scroll-Fortschritt animiert. Dabei handelt es sich nicht um den normalen Scroll-Fortschritt, sondern um etwas anderes. Ich stelle einen Link zur Website sowie einen Screenshot des spezifischen Teils bereit, der die von mir gesuchte Animation enthält.

https://todoist.com/

Dies ist der Link zur Website.

Ich habe einen Screenshot eines bestimmten Abschnitts der Homepage der Website angehängt.

Wenn Sie auf der Seite scrollen, erfolgt das Scrollen innerhalb des Abschnitts und der Abschnitt scrollt in sich selbst. Sobald dieser Abschnitt des Scrollens abgeschlossen ist, scrollen Sie normal weiter. Ich kann viele Tutorials zum Scrollen von Fortschrittsbalken sehen, aber nicht diesen speziellen Animationsstil

P粉821808309P粉821808309203 Tage vor337

Antworte allen(1)Ich werde antworten

  • P粉548512637

    P粉5485126372024-03-30 16:33:16

    也许这个例子能帮助你解决问题。 CodePen 使用AnimeJS + ScrollMagic。

    简单地说:

    // Add scrollmagic controller
    let controller = new ScrollMagic.Controller();
    
    // Add timeline
    let tl1 = anime.timeline({autoplay: false});
    
    //Then add some animation ... and
    
    //Add first scrollmagic scene
    let scene1 = new ScrollMagic.Scene({
     triggerElement: "#one",
     triggerHook: 0.5,
     reverse: false
    })
    
    //Play 
    // Trigger animation timeline
    .on("enter", function (event) {
     tl1.play();
    })
     
    .addTo(controller);
    

    Antwort
    0
  • StornierenAntwort