滚动时淡入淡出动画答案

【问题标题】：Fade animation while scrolling滚动时淡入淡出动画
【发布时间】：2019-01-01 10:06:09
【问题描述】：

我是新来的，我想知道，在这种情况下，如何在滚动该网站时获得显示效果：

http://psec.com.ar/home

谁能帮我弄到这个？？请！我最大的疑问是如何在向下滚动元素时应用动画。

非常感谢大家！

【问题讨论】：

当您展示您的工作或一些实施努力时，人们更倾向于提供帮助。您还可以找到几个搜索“滚动动画中的幻灯片”的实现
我很乐意与您分享我的项目。但是如果我不知道如何应用它，我可能无法开始任何事情。另一方面，可以看到您没有阅读整篇文章，因为我不是在寻找幻灯片。还是谢谢！
嗨，欢迎来到 Stackoverflow，首先阅读此内容：stackoverflow.com/help/how-to-ask...。第二个问题，谷歌你自己 animate.css 和 wow.js ....

标签： javascript jquery css css-animations

【解决方案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 动画来实现效果！

希望对你有帮助

【讨论】：