滚动进度动画-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

滚动进度动画

P粉821808309 2024-03-29 19:36:49

[CSS3讨论组]

708

我需要知道如何制作滚动进度动画。这不是正常的滚动进度，而是不同的东西。我将提供网站的链接以及包含我正在寻找的动画的特定部分的屏幕截图。

https://todoist.com/

这是网站的链接。

我已附上该网站主页中特定部分的屏幕截图。

滚动页面时，滚动会在该部分中发生，并且该部分会在其自身内滚动。该部分滚动完成后，继续正常滚动。我可以看到很多关于滚动进度条的教程，但看不到这种特殊风格的动画

P粉821808309

全部回复(1)

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

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