Slide In Div and Scroll

when in viewport the divs slide in. also has scroll to position

by Glynne Turner

HTML

<div class="spacer"><a href="#first">First</a> <a href="#second">Second</a></div>
<div class="holder">
 
  <div id="first" class="box box_l">
    <div class="lr">
      cvbcvb  
    </div>
  </div>
  <div class="box box_r"> 
    <div class="rl">
      cvbcvb  
    </div>
  </div>
</div>
<div class="holder">
 
  <div id="second" class="box box_l">
    <div class="lr">
      cvbcvb  
    </div>
  </div>
  <div class="box box_r"> 
    <div class="rl">
      cvbcvb  
    </div>
  </div>
</div>

<div class="holder">
 
  <div id="third" class="box box_l">
    <div class="lr">
      cvbcvb  
    </div>
  </div>
  <div class="box box_r"> 
    <div class="rl">
      cvbcvb  
    </div>
  </div>
</div>

CSS

.holder{width:100%; background-color:green; display:table;min-height:200px;margin-top:200px; vertical-align:middle; overflow:hidden}
.spacer{height:800px;}
.box_l,.box_r{
    width:50%;
    min-height:200px;
    height:inherit;
    margin:0 ;
    background:red;
    transition: 1.5s;
    display:table-cell;
    vertical-align:middle  
}
 .box_l{ background:red;}
 .box_r{ background:grey;}
.lr{background-color:pink; display:block; height:100%; width:100%; position:relative;left:-100px;
    transition: 1.5s;
    -webkit-transition: all  1s;
    -moz-transition:all  1s ;
    -o-transition:all  1s ;
    transition: all  1s;}

.rl{background-color:orange; display:block; height:100%; width:100%; position:relative;right:-100px;
    transition: 1.5s;
    -webkit-transition: all  1s;
    -moz-transition:all  1s ;
    -o-transition:all  1s ;
    transition: all  1s;}
 
.lr.triggeredCSS3 { left:0;}
.rl.triggeredCSS3 { right:0;}

JavaScript

(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el){
       function visPx(){
         var H = $(this).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? H-t : (b<H?b:H)));  
       } visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));



$(".lr,.rl").inViewport(function(px){
    if(px) $(this).addClass("triggeredCSS3") ;
});
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});