1

Superscrollorama を使用して、この特定のサイトで矢印をアニメーション化する: http://itsuptous.org/new_site

こちらもレスポンシブデザイン。960+、768、480、および 320。メディア クエリを使用してさまざまなレイアウトをトリガーします。任意のブラウザー サイズでサイトを読み込むと、矢印が正しくアニメーション化されますが、ウィンドウを展開または最小化すると、正しくない位置に移動します。ここで何が起こっているのかわかりません。誰か考えがありますか？

水平スクロールバーを防ぐために、要素を絶対に配置しました。

従うjQuery Superscrolloramaコード：

    jQuery(document).ready(function() {
        //ACTIVATE BUTTON FOR SMOOTH SCROLLING
        jQuery("#scroll_button").scrollTo('#section_two_outer');

        //MOVE ARROWS ON SCROLL
        var controller = jQuery.superscrollorama();
        //INDIVIDUAL ELEMENT TWEEN
        controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}}));
        controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
        controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}}));
4

1 に答える 1

1

デイブ、

あなたのサイトにSuperscrolleramaの問題があるようには見えませんが、あなたが見ている問題は、ページ要素に対して行うインラインCSSの変更が原因であるように見えます。たとえば、アニメーションが起動されると、CSSの「left」属性が時間の経過とともにアニメーション化されますが、一度実行されると、ウィンドウのサイズが変更されると、レイアウトを壊す要素にleft属性が残ります。

これを修正するには、アニメーションの完了後にjQueryコールバックを使用して、矢印からインラインCSSを削除することをお勧めします。これにより、ウィンドウのサイズを変更するときに、スタイルシートがそれらの位置を管理できるようになります。この場合の最悪のシナリオでは、ビューポートのサイズが変更されているときにアニメーションが発生した場合（これをどのように実行するかさえわかりません）、ほとんど知覚できないほどのちらつきが発生するため、行ってもよいと思います。

// Demo code from http://johnpolacek.github.com/superscrollorama/
controller.addTween('#fade', 
  TweenMax.from($('#fade'),.5,{
    css:{opacity:0}, 
    onComplete: function(){alert('test')}
  }));

したがって、おそらく次のようなことをしたいと思うでしょう。

jQuery(document).ready(function() {
    //ACTIVATE BUTTON FOR SMOOTH SCROLLING
    jQuery("#scroll_button").scrollTo('#section_two_outer');

    //MOVE ARROWS ON SCROLL
    var controller = jQuery.superscrollorama();
    //INDIVIDUAL ELEMENT TWEEN
    controller.addTween('.apply_now_arrow_left', TweenMax.from(jQuery('.apply_now_arrow_left'), .5, {css:{left:'-2500px'}, onComplete:function(){jQuery('.apply_now_arrow_left').css("left","auto")}}));
    controller.addTween('.apply_now_button', TweenMax.from(jQuery('.apply_now_button'), .5, {css:{opacity: 0}}));
    controller.addTween('.apply_now_arrow_right', TweenMax.from(jQuery('.apply_now_arrow_right'), .5, {css:{left:'5000px'}, onComplete:function(){jQuery('.apply_now_arrow_right').css("left","auto")}}));

もちろん、YMMVはスタイルシートの動作に応じて異なるため、別のことを行う場合がありますが、それが基本的な全体的なアプローチです。

于 2013-02-05T20:10:52.043 に答える