Question

scroll Magic 是滚动动画的绝佳工具。

CSS，GSAP和速度动画工作很棒。

但是可以在滚动时更改HTML文本。

滚动圆形半径上的

正在移动并且同时移动。我想更改1号码应该计算2和3以及＆＃39;年份＆＃39;应该成为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);

Answer 1

抱歉，我没有详细介绍scrollMagic API。这是一个改变HTML的选项。

onStart: function () {$tText.html("2"); $year.html("years")}

Solve Fiddle Link

滚动魔术时更改HTML元素

1 个答案: