Question

我是这里的新手，在这种情况下，我想知道如何在滚动浏览本网站使用的同时获得显示效果：

http://psec.com.ar/home

有人可以帮我得到这个吗？请！我最大的疑问是如何在向下滚动元素时的确切时间应用动画。

非常感谢大家！

Answer 1

这取决于您的编码级别，要实现此效果，您需要使用javascript。一种简单的方法是找到一个类似于bootstrap的框架，通过阅读他们的文档，您会发现它很漂亮，可以将其适应您的项目。如果您不想使用引导程序，那么一个简单的代码示例将如下所示：

赋予您想要效果的元素以应用类名称animation-element

 // store the animation-element elements in a variable

  var $animation_elements = $('.animation-element');
   var $window = $(window);

  function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);

    $.each($animation_elements, function() {
      var $element = $(this);
      var element_height = $element.outerHeight();
      var element_top_position = $element.offset().top;
      var element_bottom_position = (element_top_position + element_height);

      //check to see if this current container is within viewport
      if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
        $element.addClass('in-view');
     } else {
       $element.removeClass('in-view');
     }
    });
  }

   $window.on('scroll resize', check_if_in_view);
   $window.trigger('scroll');

为此您需要jquery，如果元素在视图中，则会在视图中添加一个类，然后您可以使用效果所需的任何CSS动画！

希望这对您有帮助

滚动时淡入淡出动画

1 个答案: