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?

See here: http://stackoverflow.com/questions/8774089/jquery-detect-if-an-element-is-visible — Anderson Green, Nov 24 '13 at 22:43

score 7 · Accepted Answer · edited May 23 '17 at 11:55

7

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)

edited May 23 '17 at 11:55

Community

1
1

answered Nov 24 '13 at 23:46

koningdavid

7,903
7
35
46

That's exactly what I was looking for, thanks! I will check if it will work where I need. – euDennis Nov 26 '13 at 10:42
I tried myself, didn't work as expected. Take a look: http://jsfiddle.net/eudennis/s8qjX/ Btw, is possible to change the addClass to toggleClass to remove the class when it's nos visible? – euDennis Nov 26 '13 at 11:52
@euDennis Hey man, i'm happy to help but first fix the error's in your code and include jquery. – koningdavid Nov 26 '13 at 18:45
I added the jquery but forgot to update. What error did you mean? – euDennis Nov 26 '13 at 20:41
I forgot to answer, but it worked after some tries ;) – euDennis Mar 11 '14 at 13:11

score 2 · Answer 2 · edited Nov 24 '13 at 22:43

2

You can't make that happen purely based upon CSS. Look in to adding the animation via JQuery on document load (or whatever event you want).

for example:

$(document).ready(function() {
  $('.divSelectorGoesHere').animate({
      // Your css "property":"value"
  });
}

edited Nov 24 '13 at 22:43

Kevin Cittadini

1,449
1
21
30

answered Nov 24 '13 at 22:36

Ryan Nigro

4,389
2
17
23

Start CSS transition when reach the div (or image)

2 Answers2