Slide In Slide In Div

dive that slide in on scroll

by Glynne Turner

HTML

<div id="container">

  <div class="show">Hello</div>
  <div class="show">Hello</div>
  <div class="show">Hello</div>
  <div class="show">Hello</div>
  <div class="show">Hello</div>
  <div class="show">Hello</div>
  <div class="hideme">Fade In Left</div>
  <div class="hideme">Fade In Right</div>
  <div class="hideme">Fade In Left</div>
  <div class="hideme">Fade In Right</div>
  <div class="hideme">Fade In Left last</div>

</div>

CSS

#container {
  width: 450px;
  overflow: hidden;
  padding-bottom: 50px;
}

.hideme { 
  padding: 50px 10px;
  margin-left: -1000px;
}
 
.show {
  margin: 50px 0;
  width: 450px;
  padding: 50px 0;
}

JavaScript

$(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 (bottom_of_window > bottom_of_object) {
        $(this).animate({
          'margin-left': '0'
        }, 'fast');

      }

      if (bottom_of_window < bottom_of_object) {
        $(this).animate({
          'margin-left': '-1000'
        }, 'fast');
      }





    });

  });












});