TransitionsJS demo - Custom Easing Function

Demo of how to make your own "paralax" style scroller with your own custom easing functions which ease in and ease out the content.

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
with your own custom easing functions which ease in 
and ease out the content.

Here is an example of creating your own custom easing 
function in your transitionsJS set up, 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>
<!--
Note: not a paralax scroller in the truest definition
of the word, it just happends that this is what people
often mislabel as a paralax scroller.
-->

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;
/*
You can overlap the sections to achieve the effect
of one scrolling out while the other scrolls in*/
/*  margin-top:-900px;*/
}
/*
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() 
  {
   //example of extending the easing library
   $.easing.linearTween = function (x, t, b, c, d) {
    return c*t/d + b;
   };
      
   //set up custom transitions
   var transitions = new Transitions();
   //set custom easing functions  
   //from jquery.easing.js
   transitions.setEaseIn('linearTween');
   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
**/