Question

如果您查看this website，您会看到当您滚动并点击某些区域时，会播放淡入淡出的动画，并将内容带到视图中。我已经尝试查看源代码，试图了解他们是如何做到这一点的，但我还没有找到任何运气。

我猜他们使用Javascript / jQuery在DIV出现的时候添加一个类：

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

但问题仍然是他们如何知道DIV何时会调用这样的Javascript？

Answer 1

不确定他们是如何专门做的，但你可能想看看jQuery路点，它们可以完成你想要做的事情：http://imakewebthings.com/jquery-waypoints/

Answer 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()获取距离，并根据n的值将t设置为1或0。然后将每个div（#crashes，#feedback，#distribution，#analytics，#customers）的不透明度设置为n。（下面更好的解释）

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

#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。

Answer 3

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

Answer 4

您可以跟踪用户使用一点点jQuery滚动页面的距离，如下所示：

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

在此代码中，以像素为单位的高度是您指定要为动画发生的页面向下的距离的位置。你可能需要稍微高低一点才能达到你想要的效果。

Answer 5

您可以使用滚动API：

$(window).scroll(function (event) {
    var top = $(window).scrollTop();
     if (top > 200){ // assuming the position of your div.
        $('#element').addClass('animation');
     }
});

DIV出现时添加CSS动画

5 个答案: