制作动画中的幻灯片JavaScript和HTML

Question

如何制作幻灯片和渐变动画，如sharethis.com上的绿色和粉色框中所示？我特别喜欢蓝色盒子里有箭头的那个。是否有一组JavaScript代码或CSS效果？

Answer 1

最简单的方法可能是使用这样的库：

http://janpaepke.github.io/ScrollMagic/

我看到，对于箭头效果，当你滚动时，css高度属性是动画化的。这是用javascript完成的。但是，您也可以通过CSS3转换来实现这种效果。

更新：演示页面的滑动和擦除效果：

// ani
var pinani = new TimelineMax()
// wipe
.add(TweenMax.to("#wipe", 1, {
    width: "100%"
}))
// slide
.add(TweenMax.to("#slide", 1, {
    top: "0%",
    ease: Bounce.easeOut,
    delay: 0.2
}));
// pin
new ScrollScene({
    triggerElement: "section#pin",
    duration: 1100
})
.on("progress", function () {
    // keep centered even though width changes
    $("#wipe h3").width($("#pin>h3").width());
})
    .setTween(pinani)
    .setPin("section#pin")
    .addTo(controller);