HTML5 / Parallax建议？

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

您可以使用类似http://demos.flesler.com/jquery/scrollTo/的内容来实现此效果。

Answer 3

通过黑客攻击代码，它使用的是TweenJS和Tiny Scroll。

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

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