当div出现时CSS3转换

Question

使用Bootstrap或CSS3，除了逐渐出现以外，如何让用户向下滚动时向上滑动div元素？

@-webkit-keyframes easein 
 
{ 
 
    0% {opacity:0}; 
 
    100% {opacity:1}; 
 
} 
 
@keyframes easein 
 
{ 
 
    0% {opacity:0}; 
 
    100% {opacity:1}; 
 
} 
 
.ndd-easein 
 
{ 
 
    -webkit-animation-name:easein; /* Chrome, Safari, Opera */ 
 
    -webkit-animation-duration:1.5s; /* Chrome, Safari, Opera */ 
 
    animation-name:easein; 
 
    animation-duration:1.5s; 
 
    animation-timing-function:ease-in; 
 
}

Answer 1

这个插件做了很好的工作：scrollrevealjs，这是通过jQuery的例子存档：

$(document).ready(function() { 
 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function() { 
 
    /* Check the location of each desired element */ 
 
    $('.hideme').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); 
 
     } 
 
    }); 
 
    }); 
 
});

#container { 
 
    height: 2000px; 
 
} 
 

 
#container DIV { 
 
    margin: 50px; 
 
    padding: 50px; 
 
    background-color: lightgreen; 
 
} 
 

 
.hideme { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
    <div class="hideme">Fade In</div> 
 
</div>