QA@IT

jqueryの質問

3714 PV
jQuery.event.add(window,"load",function() { 
    var pageH = $("#メインコンテンツ").height();

    $("#ローディングバックグランド").css("height", pageH).delay(200).fadeOut(500,'easeInOutQuart');
    $("#ローダー").fadeOut(100,'easeInOutQuart');
    $("#メインコンテンツの親div").css("display", "block");
});

$(document).ready(function(){
    $('#メニュー').delay(1000).animate({top:350},3000,'easeInOutQuart',function(){});
    $("#記事").addClass('space');
    $("#メニュー2").hide();
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 240) {
                    $('#記事').removeClass('space'); 
                    $('#記事').delay(1000).animate({top:350},3000,'easeInOutQuart',function(){});
                    $('.タイトル').addClass('opTxtB'); 
                    $('.サブタイトル').addClass('opSubB');
                    $('.サブタイトル2').addClass('opSub2B');
                    $('.サブタイトル3').addClass('opSub3B');
                    $('.メニュー2').fadeIn(100); 
                    $('video').fadeOut(1000)
                } else {
                    $('#記事').addClass('space');
                    $('.タイトル').removeClass('opTxtB');
                    $('.サブタイトル').removeClass('opSubB');
                    $('.サブタイトル2').removeClass('opSub2B');
                    $('.サブタイトル3').removeClass('opSub3B');
                    $('.メニュー2').fadeOut(100); 
                    $('video').fadeIn(100) 
                    }
                });
            });
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 500) { 
                    $('#title').addClass('grad'); 
                } else {
                    $('#title').removeClass('grad'); 
                }
            });
        });
    });

お世話になっております。
現在画面がスクロール値240でぱっと変わる様なHPを作っているのですが
240を行き来したり、どうしてもスクロール値で取得しているためマウスを高速移動すると挙動が一気に現れて
少し滑稽な感じになってしまいます。

デザインはお見せできませんが、マウスをゆっくり移動しないとちゃんと流れで視覚的にうまく行かないというのと
ハイスピードマウス操作対策等はあるのでしょうか。

それと、今回はオープニングスプラッシュはないのですがオープニングが終わった後にふわっと画面を遷移して
メインを登場させたいと思っているのですが、delayやeasingでうまく行きません。

ご教授頂けますでしょうか。

jquery-1.11.1.min.js を使っています。

よろしくお願い致します。

回答

スクロールイベントをトリガーにして実行される関数がたくさん実行されているのかもしれないので、
適当にまびく Underscore.js の _.throttle か _.debounce をいれていみてはどうでしょうか。

編集 履歴 (0)

mori_dev さん

ご指摘ありがとう御座います。
まだUnderscore.jsの知識が乏しいため、ドットインストールで勉強してみました。
しかしまだ自分には使いこなせないレベルでした・・。 JSの基礎をしっかり覚えて行きたいと思っています。

編集 履歴 (0)

すいません、オープニングの画面はうまく行きました。

後は、スクロールして240のところで一旦スクロールを止めてアニメーションが終わるのを待って再度スクロールできる様にするとかで対応しようと思っていますが、まだ成功していません・・。

編集 履歴 (0)

例えば、240スクロールしたら一旦画面を止めるとかそういった処理ですかね。

ちなみに画面をガラッと変える事で変えた後のアンカーリンクのとび先もおかしくなってしまいました・・。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。