scroll Magic是一个很棒的滚动动画工具。
CSS, GSAP和速度动画工作很好。
<但是可以在滚动时更改HTML文本吗?
小提琴演示/strong>
在滚动的圆周半径是移动的，并在同一时间。我想改变1的数字应该是2和3，而"年"应该是2和3的数字上的年。它应该像卷轴上的预加载器。
这是可能的通过CSS显示和隐藏，但我想在scrollMagic用HTML做到这一点。我只是想知道这是否可能。
代码必须在那里，这就是为什么要放它。
var controller = new ScrollMagic.Controller();
var yearChange = new TimelineMax()
.fromTo(".year-loader", 1, {rotation:'0'}, {rotation:'720', ease: Linear.ease});
var yearCount = new ScrollMagic.Scene({
triggerElement:'#section',
triggerHook:0,
duration:'200%'
})
.setTween(yearChange)
.setPin('.yearCounter', {pushFollowers: false})
.addTo(controller);
对不起，我没有详细介绍scrollMagic API。这是一个修改HTML的选项。
onStart: function () {$tText.html("2"); $year.html("years")}
Solve Fiddle Link