Question

我目前拥有什么

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

jsFiddle of the page in its current state (scroll down)

我想添加什么

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

我知道ScrollMagic能够draw SVGs，但我不确定是否有更有效的方法。例如，也许使用HTML5画布或只是简单的图像对这个应用程序更有意义。我的目标是保持页面的响应能力，以便我们考虑一下。

非常感谢有关此主题的任何建议或演示。

当前＆＃34;事件动画＆＃34;的示例，它利用了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);

Answer 1

为什么不使用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});

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

1 个答案: