Fade в элементе на прокрутки вниз с помощью CSS

Question

Пример: http://www.chartjs.org/

При прокрутке вниз каждая статья показывает, когда он попадает в показам порт браузера. Css is

#examples article { 
    -webkit-transition: opacity 200ms ease-in-out; 
    -ms-transition: opacity 200ms ease-in-out; 
    -moz-transition: opacity 200ms ease-in-out; 
    -o-transition: opacity 200ms ease-in-out; 
    transition: opacity 200ms ease-in-out; 
    position: relative; 
    margin-top: 20px; 
    clear: both; 
} 

Я пробовал этот css, но он не работает. Есть ли какой-нибудь javascript, который работает вместе с css? Как я могу добиться такого эффекта scroll-> fadeIn?

Answer 1

Demo Fiddle

вы хотите что-то вроде этого?

$(window).scroll(function() { 

     /* Check the location of each desired element */ 
     $('.article').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); 

      } 

     }); 

    }); 

Answer 2

Mohammeds ответ не принимает во внимание любые позиционированы абсолютно изображения ... мы должны использовать смещение вместо позиции

$(window).scroll(function() { 

    /* Check the location of each desired element */ 
    $('.article').each(function (i) { 

     var bottom_of_object = $(this).offset().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); 

     } 
    }); 
});