0

我目前拥有的

我正在使用 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);
4

1 回答 1

0

为什么不只使用 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});
于 2016-02-25T00:08:20.023 回答