Start CSS transition when reach the div (or image)

Question

I already search for that, but didn't find much information about it. It's possible to create and CSS transition with :hover effect, for example:

div { color: red;} div:hover {color: blue;}

And you just have to add the transition to this CSS. But I want that the trigger to start animation is when the DIV show up in the screen.

How can I achieve that?

Answer 1

One way to do this is using a function to check if the element in question is in view when you scroll the page.

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }

    $(window).scroll(function(){

        if (isScrolledIntoView('.class') === true) {
            $('.class').addClass('in-view')
        }

    });

code from: Check if element is visible after scrolling

This code will add a class "in-view" if ".class" is visible after scrolling down. Based on this class you can add you css transition, for example:

   .class {
      opacity:0;
      transition:all 0.5s;
   }

    .class.in-view {
       opacity:1;
    }

Example: http://jsfiddle.net/z3xTU/ (scroll down)