当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的示例存档：

＆＃13;

＆＃13;

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

＆＃13;

#container {
  height: 2000px;
}

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

.hideme {
  opacity: 0;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;