TransitionJS demo - Bare Bones

Here is the most basic way to setup transitionsJS, a library made to control panels sliding in and off the screen.

by Nicholas Dunbar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdn.rawgit.com/nicholasdunbar/transitionsJS/master/js/transitions/transitions.js"></script>
<!--
Demo of how to make your own "paralax" style scroller

Here is the most basic way to setup transitionsJS,
a library made to control panels sliding in and off 
the screen.

Section elements used to control the scrolling 
of the slider elements below. As the top of the 
div slides under the view port this triggers
the ease in function from jquery.easing.js
as you scroll near the middle of the div ease
out functions will be triggered.    

Watch closely the boundaries of 
<div id="section-skills" class="sections">
as it scrolls by and compare what happends to 
<div id="skills">skills</div>
-->

<!--
See Fiddle Options at left for the body tag:
<body onload="startScroll()" >
-->

<div>scroll me down and watch<div>
<div id="section-skills" class="sections">1</div>
<div id="section-quote1" class="sections">2</div>
<div id="section-brand" class="sections">3</div>
<div id="section-career" class="sections">4</div>
<div id="section-quote2" class="sections">5</div>
<!--
slider elements that will be transitioned using 
equations as slider elements scroll by the 
normal view port
-->
<div id="skills" class="band">skills</div>
<div id="quote1" class="band">quote1</div>
<div id="brand" class="band">brand</div>
<div id="career" class="band">career</div>
<div id="quote2" class="band">quote2</div>
<div id="scroll-out-padding" style="height:500px"></div>

CSS

@charset "UTF-8";
/* 
transitions.css 
*/

/*
applied to all elements that are being eased in and out
as you scroll. This is provided normally in the transitions.css file on GitHub
https://github.com/nicholasdunbar/transitionsJS
*/
.sliders{
	visibility:hidden;
	position:relative;
	width:100%;
	display:block;
}
/*
containers that hold the sliders
This is provided normally in the transitions.css 
file on GitHub
https://github.com/nicholasdunbar/transitionsJS
*/
.wrapper{
	display:block;
	width:100%;
	position:fixed;
	top:0;
}

/* 
your-custom.css 
*/

/*
Here I just make sure that each sections div has a height
so it is scrollable and I added in a dashed border so you could see each section scroller more clearly.
*/
.sections {
	width:100%;
	border-style:dashed;
	border-width:medium;
	border-color:#3F0;
	display:block;
	height:2000px;
}
/*
custom height of the panels being transitioned in and out
*/
.band {
	width:100%;
	border-style:dashed;
	border-width:medium;
	border-color:#000;
	display:block;
	height:100px;
}

JavaScript

function startScroll(){
 $(document).ready
  (
  function() 
  {
      
   //set up custom transitions
   var transitions = new Transitions();
   //set custom default easing functions  
   //from jquery.easing.js
   transitions.setEaseIn('easeInOutQuint');
   transitions.setEaseOut('easeInOutQuint');
			
   //define the elements you want to scroll in and out
   //example of parameters:
   //addSlider( '#div-to-slide-in-and-out',
   //           '#scroll-position-based-on-this-div' );
   transitions.addSlider('#skills','#section-skills');
   transitions.addSlider('#quote1','#section-quote1');
   transitions.addSlider('#brand','#section-brand');
   transitions.addSlider('#career','#section-career');
   transitions.addSlider('#quote2','#section-quote2');
			
   //init scroller
   transitions.doScroll();
      
   //init scroll listener
   $(window).on
   (
    "scroll",
    transitions.doScroll
   );
      
  }//end anonymous function
 );//end $(document).ready()
};//end startScroll()

/**
You may download the libraries from gitHub here:
https://github.com/danro/jquery-easing
https://github.com/nicholasdunbar/transitionsJS

tested with JQuery 1.10.1
**/