Start CSS transition when reach the div (or image)

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?

---

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)

---

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"
  });
}

链接地址: http://www.djcxy.com/p/83538.html

上一篇: 检查元素是否在视图中，如果是，则添加类

下一篇: 到达div（或图像）时开始CSS转换