3

私が現在取り組んでいる Wordpress サイトで、私のクライアントは、ワイプまたはスライド トランジションのように、フロント ページのさまざまなセクションを下から上にスライドさせて、前のセクションを覆うことを望んでいました。http://johnpolacek.github.com/superscrollorama/にあるスーパースクロールラマを使用して、望ましい結果を得ることができました。

次に、フロント ページのみにナビゲーション メニューを作成する必要がありました。私はそうし、ページのさまざまなポイントにアンカーを設定しました。また、ナビゲーション メニューのリンクをクリックしたときのスクロール アニメーションに scrollTo ライブラリを使用しました。ただし、私が遭遇したいくつかの問題があります。

  • 上部にある [ショーケース] をクリックすると、ショーケース セクションに移動しますが、製品セクション (その直後の div) が重なっています。
  • 他の div には、次の div が現在の div と重なるという同じ問題があるようです
  • 前方にしか移動できません。戻ろうとしても戻らない(「ホーム」以外)
  • div の CSS の「top」プロパティに関係があるのではないかと思い、クリック機能が作動するたびにリセットしてみましたが、うまくいきませんでした。ということで、とりあえず外しました。
  • 現在、javascript を設定して、アンカーまでスクロールするデフォルト アクションを防止し、代わりに実際の div 自体までスクロールするように設定しています。しかし、私はまだ同じ問題を抱えています。

編集:上記の問題はすべて解決しましたが、新しい問題が発生しました。サイトをスクロールし、ブラウザ ウィンドウのサイズを変更して上にスクロールすると、下部の一部が切り取られていることに気付くでしょう。スーパースクロールラマのページを見ましたが、同じ問題があります。誰かがこれを修正する方法を知っていることを望んでいました。

ここに私が現在取り組んでいるサイトがあります: http://breathe.simalam.ca/

スクロール用の JavaScript は次のとおりです。

$(document).ready(function() {
jQuery('.home-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo(0, 1000, {queue:true});
});
jQuery('.showcase-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#showcase_content', 1000, {queue:true});
});
jQuery('.products-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#products_content', 1000, {queue:true});

});
jQuery('.about-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#about_content', 1000, {queue:true});

});
jQuery('.locator-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#locator_content', 1000, {queue:true});

});
jQuery('.contact-link').click(function(e){
    e.preventDefault();
    jQuery(window).scrollTo('#contact_content', 1000, {queue:true});

}); });

スクロールラマコード:

$(document).ready(function() {
    $('#wrapper').css('display','block');
    var controller = $.superscrollorama();
    var pinDur = 4000;  /* set duration of pin scroll in pixels */

    // create animation timeline for pinned element
    var pinAnimations = new TimelineLite();
    pinAnimations
    .append([
        TweenMax.to($('#showcase'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#products'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#about'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#locator'), .5, {css:{top:0}})
    ], .5)
    .append([
        TweenMax.to($('#contact'), .5, {css:{top:0}})
    ], .5)
    .append(TweenMax.to($('#pin-frame-unpin'), .5, {css:{top:'100px'}}));


    controller.pin($('#examples-pin'), pinDur, {
        anim:pinAnimations, 
        onPin: function() {
            $('#examples-pin').css('height','100%');
        }, 
        onUnpin: function() {
            $('#examples-pin').css('height','2000px');
        }
    }); });

すべてのセクション div は、親 div 内にあります。セクション div はすべて、高さ、幅、および上部が 100% です。

これらすべてのセクション div を含む親 div は次のとおりです。

#examples-pin { 
 position: relative; /* relative positioning for transitions to work? */
 width: 101%; /* max width */
 height: 2000px; /* height of 2000px for now */
 overflow: hidden; /* hide the overflow for transitions to work */
 margin-bottom: -200px; /* negative bottom margin */
}
4

1 に答える 1