在滚动魔法上更改 HTML 元素

Question

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

CSS，GSAP 和速度动画效果很好。

But is it possible to change HTML text on scroll.

在滚动圆半径同时移动。我想更改 1 数字应该算作 2 和 3 并且 'year' 应该变成 2 和 3 数字上的年份。它应该像卷轴上的预加载器。

这可以通过 CSS 显示和隐藏来实现，但我想在 scrollMagic 中使用 HTML 来实现。只是想知道是否可能。

代码必须与 fiddle 一起出现，这就是放置代码的原因。

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 元素

Change HTML element on scroll Magic

html

css

jquery

scroll

scrollmagic