1

このWebサイトを見ると、スクロールして特定の領域を押すと、フェードインアニメーションが再生され、コンテンツが表示されることがわかります。ソースを調べて、これがどのように行われるかを理解しようとしましたが、まだ運が見つかりませんでした。

DIVが次のように表示されたときに、Javascript/jQueryを使用してクラスを追加していると思います。

$('#element').addClass('animation');

しかし、DIVがそのようなJavascriptを呼び出しているように見えるとき、彼らはどのようにしてそれを知るのかという疑問が残ります。

4

5 に答える 5

2

http://hockeyapp.net/javascripts/jquery.features.jsにあります

ここでは少しきれいです：

function f_scrollTop() {
    return f_filterResults(
        window.pageYOffset ? window.pageYOffset : 0,
        document.documentElement ? document.documentElement.scrollTop : 0,
        document.body ? document.body.scrollTop : 0
    )
}

function f_filterResults(e, t, n) {
    var r = e ? e : 0;
    return t && (!r || r > t) && (r = t), n && (!r || r > n) ? n : r
}

$(document).ready(function() {
    var e = navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? !0 : !1;

    e ? ($("#crashes").css("opacity", 1),
        $("#feedback").css("opacity", 1),
        $("#distribution").css("opacity", 1),
        $("#analytics").css("opacity", 1),
        $("#customers").css("opacity", 1))
      : ($(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 250 && (n = 1), $("#crashes").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 2250 && (n = 1), $("#feedback").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 3100 && (n = 1), $("#distribution").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 4400 && (n = 1), $("#analytics").css("opacity", n)

        }), $(window).scroll(function() {

            var e = $("body").height(),
                t = f_scrollTop(),
                n = 0;
            t > 3200 && (n = 1), $("#customers").css("opacity", n)

        })), $(".switch-monthly").live("click", function(e) {
            $(this).addClass("switch-yearly"), $(this).removeClass("switch-monthly"), $(".price.monthly").fadeOut(), $(".price.yearly").fadeIn(), $(".save").slideDown(), e.preventDefault()
        }), $(".switch-yearly").live("click", function(e) {
            $(this).removeClass("switch-yearly"), $(this).addClass("switch-monthly"), $(".price.monthly").fadeIn(), $(".price.yearly").fadeOut(), $(".save").slideUp(), e.preventDefault()
        }), $(".fancybox").fancybox({openEffect: "elastic",closeEffect: "elastic"})
});

f_scrollTopそしてf_filterResults、ページがどれだけスクロールされたかを見つけるためのクロスブラウザーの方法を形成します。

では、 5document.readyつの関数を にバインドし$(window).scrollます。スクロールするたびに、 を使用して距離を取得し、 の値に応じて 1 または 0 にt = t_scrollTop()設定します。次に、各 div ( 、、、)の不透明度を に設定します。（以下のより良い説明）nt#crashes#feedback#distribution#analytics#customersn

そのため、いつ表示されるかはわかりませんdiv。スクロールするたびに、不透明度があるかどうかがチェックされ、それに応じて不透明度が設定されます。また、彼らは を使用しませんanimateが、代わりにhttp://hockeyapp.net/stylesheets/public.csstransitionで 4 つの に CSS セットを持っています(それを読もうとしないでください):div

#distribution,
#crashes,
#feedback,
#analytics {
   opacity: 0;
   -webkit-transition:opacity .5s ease-in-out 0s
}

次のような行で：

t > 250 && (n = 1), $("#crashes").css("opacity", n)

コンマ演算子は、「各式を評価し、式全体の値が最後の値になる」ことを示しています。ここでは、ソースが縮小されているため、簡潔にするために使用されている可能性があります。

nはすでに 0 で&&短絡しているため、評価される場合はt > 250、(n = 1)そうでない場合はn0 のままになります。次に、不透明度を に設定しnます。

于 2012-12-13T19:56:29.040 に答える
2

彼らが具体的にどのようにそれを行っているかはわかりませんが、あなたがやろうとしていることを達成するjQueryウェイポイントを見てみたいかもしれません: http://imakewebthings.com/jquery-waypoints/

于 2012-12-13T19:33:02.747 に答える
0

次のような少しの jQuery を使用して、ユーザーがページをどこまでスクロールしたかを追跡できます。

$(window).scroll(function(e){
    if($(this).scrollTop() > 150) //the 150 here is the height in pixels
    {
        $('#element').addClass('animation');
    }
});

このコードでは、ピクセル単位の高さは、アニメーションを発生させるためにページをどれくらい下に移動するかを指定する場所です。希望どおりに正確に取得するには、高さを少し調整する必要がある場合があります。

于 2012-12-13T19:45:48.480 に答える
0

スクロール API を使用できます。

$(window).scroll(function (event) {
    var top = $(window).scrollTop();
     if (top > 200){ // assuming the position of your div.
        $('#element').addClass('animation');
     }
});
于 2012-12-13T19:45:55.407 に答える
0

彼らのソースを見ると、彼らはここにあるアンカースクロールと呼ばれるものを使用していると思います。http://www.binpress.com/app/anchorscroll/228

于 2012-12-13T19:45:36.947 に答える