jquery - HTML5 / 视差建议？

Question

嘿，和我一起工作的一位设计师真的很想融入这个网站的效果：

https://snipcart.com/

特别是它说“它是如何工作的”并且你向下滚动并且东西被隐藏但随后出现的部分。

我不确定这是如何完成的，我尝试寻找一些文档技术等，但是关于如何获得该动画的选择并不广泛。某个善良的灵魂能引导我走向正确的方向吗？

谢谢

Answer 1

效果并不难创造。

我这样做的方式：

1-元素隐藏在css中

#element{
    opacity: 0;
}

2- 一个 jquery 函数检查在页面滚动时滚动了多少页面

$(window).scroll(function(){
    var elemPosition = $('#element').offset().top,
        scrollPosition = $(window).scrollTop();

    //Checks if a little higher than element position (you can change 100 for whatever you want)
    if(scrollPosition - 100 > elemPosition){ 
        $('#element').animate({
            opacity: 1
        }, 500); //OR the animation you want
    }  

});

这就是这一切的基础。然后您可以在 css 中设置一个起始状态，并在 jquery 中将其动画化为其他内容。

Answer 2

从破解代码开始，它使用了 TweenJS 和 Tiny Scroll。

http://www.baijs.nl/tinyscrollbar/

http://createjs.com/#!/TweenJS

Answer 3

您可以使用http://demos.flesler.com/jquery/scrollTo/ 之类的东西来实现该效果。