Parallax and Slide in

by Glynne Turner

HTML

<div id="content">
  <div class="first_div">
 content
  </div>
  <div class="item1 iv" data-id="item1">
    this is the content of item 1
  </div>
  <div class="item2 iv" data-id="item2">
    this is the content of item 2
  </div>
  <div class="item3 iv" data-id="item3">
    this is the content of item 3
  </div>
  <div class="item4 iv" data-id="item4">
    this is the content of item 4
  </div>
</div>

CSS

*{box-sizing:border-box;}
html,body{margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit; 
		
}   
body {
		min-height:100%; 
		position:absolute;
		line-height: 1; 
		width:100%;  
		overflow-x: hidden;
}
.first_div{
    /* Set a specific height */
     height: 100vh; 
	display:table;
    width:100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;background-image: url("https://www.bdcnetwork.com/sites/bdc/files/styles/content_display_image/public/tall-buildings.jpg?itok=wS4JCDJU"); }
#content{ 
          width:100%;
           
          background-color:red;  
          display:table;-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s; 
}
div[class^="item"] {  
         padding:120px 0;
         width:100%;
         display:block;
         position:relative;-webkit-transition: all 2s; /* For Safari 3.1 to 6.0 */
    transition: all 2s;
}
 
 
 div[class^="item"]:nth-child(odd){margin-left:-50%;    }
 div[class^="item"]:nth-child(even){margin-left:50%;  }
.item1{ 
         background-color:green;

         
}
.item2{ 
         background-color:pink;
         
}
.item3{ 
         background-color:purple;
         
}
.item4{ 
         background-color:blue;
         
}
.vis{margin: 0px !important;}

JavaScript

$(window).scroll(function(){
   $('.iv').each(function(){
   var visibl = $(this).data('id')
    if(isScrolledIntoView($(this))){ 
      	$('.'+visibl).addClass('vis')
      } 
      });
});


function isScrolledIntoView(elem){
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height()+10;

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}