css 滚动进度动画

fhg3lkii  于 2022-12-27  发布在  其他
关注(0)|答案(1)|浏览(114)

我需要知道如何使滚动进度动画。这不是正常的滚动进度,但不同的东西。我会给予网站的链接和特定部分的截图,其中有动画,我正在寻找。
https://todoist.com/
这是网站的链接。

我已附上本网站主页上该部分的屏幕截图。
当滚动页面时,滚动在这一节中得到strucks,这一节在它自己内部滚动。这一节的滚动完成后,正常的滚动继续。我可以看到很多滚动进度条的教程,但没有这种特殊风格的动画

wlwcrazw

wlwcrazw1#

也许这个例子会帮助你解决这个问题。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);

相关问题