整页滚动,滚动时触发动画

Full page scroll with animations triggered on scroll

我已经努力完成 this 大约两周了。这里有人知道怎么做吗?我什至不会粘贴我的代码,因为它是有史以来最糟糕的代码。

谢谢。

你检查过fullpage.js了吗?

您可以通过使用 CSS Easing Animation Tool of Matthew Lein 创建自己的 CSS3 函数来获得相同的滚动效果。

然后传给fullPage.js的参数easingcss3

easingcss3: 'cubic-bezier(1.000, 0.000, 0.000, 1.005) 0.5s',

或者,如果您愿意,可以选择 jQuery easing effects 并使用 css3:false。 (虽然用 css3 会更流畅)

关于滚动时消失的元素,您必须通过在回调中为它们设置动画来自行完成,例如 onLeave or by using the classes added to the body as in this example

body.fp-viewing-page2-slide1 #section1 .moveOut{
    transform: translate3d(0, -400px, 0);
}

this line.

中的内容