1

如果您看一下这个网站，您会发现当您滚动并点击某些区域时，动画会播放淡入淡出，并将内容呈现出来。我试图通过源代码来了解他们是如何做到这一点的，但我还没有找到任何运气。

我猜当 DIV 如下所示时，他们使用 Javascript/jQuery 添加一个类：

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

但是问题仍然存在，他们如何知道 DIV 何时调用此类 Javascript？

4

5 回答 5

2

不知道他们具体是如何做的，但你可能想看看 jQuery waypoints 可以完成你想要做的事情：http: //imakewebthings.com/jquery-waypoints/

于 2012-12-13T19:33:02.747 回答
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形成一种跨浏览器的方式来查找页面滚动了多远。

上document.ready，它们将五个函数绑定到$(window).scroll. 每次滚动时，它都会使用 获取距离，并根据 的值t = t_scrollTop()设置为 1 或 0 。然后将每个 div ( , , , , ) 的不透明度设置为. （下面有更好的解释）nt#crashes#feedback#distribution#analytics#customersn

因此，他们不知道何时div出现 - 每次滚动时都会检查它是否存在并相应地设置不透明度。此外，他们不使用animate，而是为http://hockeyapp.net/stylesheets/public.csstransition中的四个divs设置了 CSS （不要尝试阅读）：

#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)，否则它将n保持为 0。然后它将不透明度设置为n。

于 2012-12-13T19:56:29.040 回答
0

看看他们的来源，我认为他们正在使用一些叫做 anchorScroll 的东西。http://www.binpress.com/app/anchorscroll/228

于 2012-12-13T19:45:36.947 回答
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 回答