Fade in element on scroll down using css

Question

Example: http://www.chartjs.org/

When scrolling down each article shows up when it gets in the view-port of the browser. The css is

Answer 1

Demo Fiddle

Do you want something like this ?

   $(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);

            }

        });

    });