Fade animation while scrolling

it depends on your coding level, to achieve this effect you need to use javascript. An easy way is to find a framework like bootstrap that by reading their docs you will see that it is pretty is to adapt it to your project. If you don’t want to use bootstrap, then a simple code example will be like this:

give the elements you want the effect to apply the class-name 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');

You need jquery for this, this adds a class in-view if the element is in view then you can use whatever css animations you need for the effect!

I hope this will help you