2

SuperScrollorama で銃をアニメーション化しようとしています。アイデアは、ユーザーが下にスクロールすると銃が発砲するというものです。これには、かなり複雑なトゥイーンが含まれます。

これが私がこれまでに持っているものです（* Firefoxで最適に機能します）：

https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/index.html

引き金を引いてハンマーを後方に回転させたので、回転: -25 に達した後、ハンマーを回転: 0 にスナップさせる必要があります。このタイムラインを追加する方法がわかりません。

これが私のスクリプトです：

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();

        controller.addTween(
            '#gun',
            (new TimelineLite())
                .append([
                    TweenMax.fromTo($('#hammer'), 1, 
                        {css:{rotation: 0}, immediateRender:true}, 
                        {css:{rotation: -25}, ease:Quad.easeInOut}),
                    TweenMax.fromTo($('#trigger'), 1, 
                        {css:{rotation: 0}, immediateRender:true}, 
                        {css:{rotation: 40}, ease:Quad.easeInOut})
                    ]),
                    500, // scroll duration of tween
                    200); // offset?
    });
</script>

誰でも私にできる助けをいただければ幸いです。Superscrolloramaサイトをできる限り読み、あらゆる種類のコード スニペットを調べました。まだそれを理解することはできません。

4

1 に答える 1

0

したがって、この投稿は数か月前のものであり、まだ解決策がないという事実から始めさせてください。しかし、onComplete がそれを処理する方法だと感じています。少なくとも Google ホスト サイトでは、無効な DOM とリソースが正しく読み込まれないという問題がいくつかありました。デバッグに役立つコミュニティとコードを共有するには、JSFiddle を使用することをお勧めします。リンクからマークアップを取得すると、修正が必要ないくつかの破損した div が得られました。終了タグが欠落しているだけだと思います（つまり</div>）しかし、2つを比較してすべてを確認できます。また、jQuery を 2 回含めてから、再度チェックして、見つからない場合はロードしているようです。すべてをクリーンアップした後、期待どおりに動作するようです。ただし、下にスクロールし続けると、トリガーが解放され、撃針がハンマーで閉じられるのをアニメーション化する方法も探していると思います。非常に似たようなことをしようとした後、実際にあなたの質問に出くわしました。基本的に、要素がオーバーフローDOM要素に入るとフェードインし、出入りするときに他のイン/アウトトゥイーンの概念実証として要素を去ろうとしているときに元に戻そうとしています。最初に言ったように、私は onComplete があなたが望むものになると信じていますが、私がやろうとしていることはおそらくそうではありません. まだ定かではありませんが、たぶん、他の人がこれに参加するでしょう。いずれにせよ、以下に私の考えがあります。「from」状態はページの初期化から適切であるため、 to メソッドだけに置き換えたので、 fromTo メソッドが必要かどうかはわかりません。ロード時に onComplete が起動する理由を見つけて解決できれば、それで問題ありません。3 か月近く経っても誰も答えを出していないので、これで少なくとももう少し洞察が得られることを願っています。もし、あんたが 3か月近く経っても誰も答えを出していないので、少なくとももう少し洞察を与えるでしょう. もし、あんたが 3か月近く経っても誰も答えを出していないので、少なくとももう少し洞察を与えるでしょう. もし、あんたがこれをすべて解決してください。この投稿を更新して、解決策を示していただければ幸いです。

JSFiddle リンク

CSS:

body{
    background: url(https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/plus_yellow.png);
    background-color: #FFFF00;
    background-repeat:repeat;
    height: 3000px;
}

#gun{
    position: fixed;
}

#body{
    z-index: 2;
    position: absolute;
    left: 0px;
    top: 100px;
}

#slide{
    position: absolute;
}

#slide1{
    z-index: 3;
    position: absolute;
    left: 91px;
    top: 7px;
}

#slide2{
    z-index: 1;
    position: absolute;
    left: 735px;
    top: 95px;
}

#barrel{
    z-index: 0;
    position: absolute;
    left: 371px;
    top: 25px;

}

#hammer{
    z-index: 0;
    position: absolute;
    left: 63px;
    top: 60px;

}

#trigger{
    z-index: 0;
    position: absolute;
    left: 345px;
    top: 64px;

}

HTML:

<div id="screen1">
<div id="gun">
    <img id="body" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/body.svg" alt="body" />
    <div id="slide">
        <img id="slide1" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide1.svg" alt="slide1" />
        <img id="slide2" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide2.svg" alt="slide2" />
    </div>
    <div>
        <img id="barrel" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/barrel.svg" alt="barrel" />
        <img id="hammer" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/hammer.svg" alt="hammer" />
        <img id="trigger" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/trigger.svg" alt="trigger" />
    </div>
</div>

JS:

var controller = $.superscrollorama(),
handleComplete = function(elem) {
    console.log('complete', elem);
    $('#'+elem).css('rotation', 0);
};

controller.addTween($('#gun'),
    (new TimelineLite())
        .append([
            TweenMax.to($('#hammer'), 1, 
                        {css:{rotation: -25}, onComplete:handleComplete('hammer'), ease:Quad.easeInOut}),
            TweenMax.to($('#trigger'), 1, 
                        {css:{rotation: 40}, onComplete:handleComplete('trigger'), ease:Quad.easeInOut})
            ]),
            500, // scroll duration of tween in pixels
            200); // offset (helps with timing when needed)
于 2013-11-26T21:09:17.190 に答える