使用 jQuery 和 ScrollMagic 滚动动画时间轴

Scrolling animated timeline using jQuery and ScrollMagic

本文关键字：动画 时间 滚动 ScrollMagic jQuery 使用      更新时间：2023-09-26

我目前拥有的

我正在使用jQuery和ScrollMagic（使用GSAP插件）构建HTML/CSS/JS滚动时间线。我有基本的时间轴功能工作，随着页面向下滚动，时间轴事件会动画化。

当前状态下页面的 jsFiddle （向下滚动）

我想补充什么

我的问题是关于实现水平线的最佳方法，这些水平线从中心垂直线分支到每个时间线事件，因为它们淡入。理想情况下，水平线将像从中心线绘制一样动画化，但淡入淡出也可以。

我知道ScrollMagic有能力绘制SVG，但我不确定是否有更有效的方法。例如，也许使用HTML5画布或只是简单的图像对于此应用程序更有意义。我的目标是保持页面响应，所以这是需要考虑的事情。

有关此主题的任何建议或演示将不胜感激。

当前"事件动画"的示例，它利用了ScrollMagic和GSAP。我在时间轴中每年都有这样的代码块。这很可能是添加水平线动画的地方： 

var tween1 = new TimelineMax()
    .fromTo("#section1 .left", .5, {left: "10%", opacity: 0, scale: .5}, {left: "0%", opacity: 1, scale: 1})
    .fromTo("#section1 .right", .5, {right: "10%", opacity: 0, scale: .5}, {right: "0%", opacity: 1, scale: 1});
var scene1 = new ScrollMagic.Scene({triggerElement: "#section1 .center #point", triggerHook: 0.5, offset: pointHeight})
    .setTween(tween1)
    .addTo(controller);

为什么不直接使用 1px 高的div？我认为这比绘制 SVG 轻量级得多。我在第一项中使用div 方法更新了您的 JSFiddle：https://jsfiddle.net/jameson5555/abyk4gcj/8/

这是基本思想：

<div class="timeline-item">
    <div class='h-line'></div>
    <img src="Board_Transparent.png">
    <p>1980 - Event #1</p>
</div>
.h-line {
    height: 1px;
    position: absolute;
    top: 50px;
    right: 0;
    left: auto;
    background: #fff;
    width: calc(100% - 75px);
}
.from("#section1 .h-line", .5, {width: 0});
相关文章：