Question

我对滚动时做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个不同的框，当用户向下滚动到每个框时，将显示一个框。但我的问题是，我如何在这些框内制作动画。

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

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

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

谢谢！

Answer 1

易。您首先必须确保标题，图像和内容都在他们自己的div内。然后你会做同样的过程，但改为使用各个div的ypositions和高度。 Here is a 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);
            }
        });
    });
});

Answer 2

使用.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 / fullscreen view

CSS3动画 - 如何在滚动时为不同的元素制作不同的动画

2 个答案: