滚动位置时显示Div

Question

首先,我想参考这个网站:http://annasafroncik.it/ 我喜欢动画的展示方式.在jquery中创建类似的函数难吗？有没有插件可以创建这样的效果？

希望有人能帮助我.

Answer 1

基本上,你想为你想要隐藏的每个元素添加一个"hideme"类(然后你将该类设置为"opacity:0";

然后,使用jQuery设置$(window).scroll()事件,以检查每个"hideme"元素底部相对于可见窗口底边的位置.

这是它的肉......

/* Every time the window is scrolled ... */
$(window).scroll( function(){

    /* Check the location of each desired element */
    $('.hideme').each( function(i){

        var bottom_of_object = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it in */
        if( bottom_of_window > bottom_of_object ){

            $(this).animate({'opacity':'1'},500);

        }

    }); 

});

这是一个完整的jsfiddle:http://jsfiddle.net/tcloninger/e5qaD/

Answer 2

插件？也许,但你绝对可以构建你自己想象的任何动画组合.如果你对选择器和CSS有一个坚定的把握,天空是极限!我建议从jQuery网站开始并查看一些示例.

如果你已经熟悉jQuery,为了帮助推动这个问题,你可以尝试以下方法...想一想你的页面有多远div,听一下滚动事件,什么时候div进入焦点(即:页面已经滚动过div你制定的位置),运行动画.就像是:

<div id="my_div">Some content</div>

<script type="text/javascript">

    $(document).ready(function() {

        var my_div = $("#my_div");
        var div_top = my_div.offset().top;

        $(document).scroll(function() {
            if (div_top <= $(document).scrollTop()) {
                // do some cool animations...
            }
        });

    });

</script>

我希望我没有搞砸我的语法!