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 に答える