1

我有一个关于在滚动上做 CSS3 动画的问题。

我找到了一个代码，它在用户向下滚动后显示 DIV 元素：

    <script type="text/javascript">

            $(document).ready(function() {

        /* 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).position().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();

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

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

                }

            }); 

        });

    });

    </script>

我正在构建一个站点，其中一个将有大约 5 个不同的框，当用户向下滚动到每个框时会显示一个。但我的问题是，我如何在这些盒子里制作动画。

敌人示例：在每个框中都有标题、内容和图像。我如何使所有元素彼此出现，因为使用此代码，所有类元素都会立即显示。但我希望如果用户向下滚动，首先出现标题，然后是内容，最后是图像。

然后当用户滚动到下一个框时，同样的过程会重复。

我使用了一些 CSS3 延迟，但在这种情况下，我不知道用户需要多长时间才能向下滚动。

谢谢！

4

2 回答 2

1

简单的。您首先必须确保标题、图像和内容都在他们自己div的 s 中。然后您将执行相同的过程，但使用各个 div 的 y 位置和高度。这是一个jsFiddle

$(document).ready(function () {
    $(window).scroll(function () {
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        $('.title').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.innerImage').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.content').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
    });
});
于 2013-06-29T22:19:16.807 回答
1

使用.animate()的回调函数和.getBoundingClientRect()函数的可能解决方案：

HTML

<div style="height:1200px; background:#fef;">test</div>
    <div class="hideme">
        <div class="title">title 1</div>
        <div class="main">content 1
            <img src="/favicon.png" />
        </div>
    </div>
    ...
</div>

JS

$(document).ready(function () {
  $(window).on('scroll resize', function () {
    var win_height = $(window).height();
    $('.hideme').each(function (i) {
      var elem_pos = this.getBoundingClientRect();
      var title = $('.title',this);
      var main = $('.main',this);
      var images = $('img',this);
      if ((elem_pos.top>win_height || elem_pos.bottom<0)) {
        title.css('opacity',0); // hide title
        main.css('opacity',0); // hide contents
        images.css('opacity',0); // hide images
        return true; // below or above viewport, continue
      }
      if (title.is(':animated') || main.is(':animated') || images.is(':animated')) {
        return true; // continue
      }
      title.animate({
        'opacity': 1
      }, 500, function(){
        main.animate({
          'opacity': 1
        }, 500, function(){
          images.animate({
            'opacity' :1
          },500);
        });
      });
    });
  });
});

jsfiddle /全屏视图

于 2013-06-29T22:49:20.640 回答