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 website开始，然后查看some examples。

为了帮助推动这项工作，如果您已经熟悉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>

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

Answer 3

试试这个。它对我有用

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 400) {
    $("body").addClass("allowshow");
  } else {
    $("body").removeClass("allowshow");
  }
});

并且这个的css是

.showmydiv{display:block}

滚动位置时显示Div

3 个答案: