User:Chocohead/Lift.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

var Elevator = (function() {
'use strict';
// Elements
var body = null;
// Scroll vars
var animation = null;
var duration = null; // ms
var customDuration = false;
var startTime = null;
var startPosition = null;
var mainAudio;
var endAudio;
var elevating = false;
function extend( target, source ) {
for ( var key in source ) {
if ( !( key in target ) ) {
target[ key ] = source[ key ];
}
}
return target;
}
function easeInOutQuad( t, b, c, d ) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
}
/**
* Main
*/
// Time is passed through requestAnimationFrame, what a world!
function animateLoop( time ) {
if(!elevating) {
	return; //Stop
}
if (!startTime) {
startTime = time;
}
var timeSoFar = time - startTime;
var easedPosition = easeInOutQuad(timeSoFar, startPosition, -startPosition, duration);
window.scrollTo(0, easedPosition);
if( timeSoFar < duration ) {
animation = requestAnimationFrame(animateLoop);
} else {
animationFinished();
}
}
// ELEVATE!
//      ____
//    .' '=====<0
//    |======|
//    |======|
//    [IIIIII[\--()
//    |_______|
//    C O O O D
//    C O O O D
//    C O O O D
//  C__O__O__O__D
// [_____________]
function elevate() {
if( elevating ) {
return;
}
elevating = true;
startPosition = (document.documentElement.scrollTop || body.scrollTop);
// No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)
if( !customDuration ) {
duration = (startPosition * 1.5);
}
requestAnimationFrame( animateLoop );
// Start music!
if( mainAudio ) {
mainAudio.play();
}
var cancelOnScroll = function () {
	animationFinished(true);
	if (document.removeEventListener) {
	document.removeEventListener("mousewheel", cancelOnScroll, false); // IE9+, Chrome, Safari, Opera
	document.removeEventListener("DOMMouseScroll", cancelOnScroll, false); // Firefox
	}else{
	document.detachEvent("onmousewheel", cancelOnScroll); // IE 6/7/8
	}
	};
	if (document.addEventListener) {
	// IE9+, Chrome, Safari, Opera
	document.addEventListener("mousewheel", cancelOnScroll, false);
	// Firefox
	document.addEventListener("DOMMouseScroll", cancelOnScroll, false);
	}
	// IE 6/7/8
	else {
	document.attachEvent("onmousewheel", cancelOnScroll);
	}
}
function resetPositions() {
startTime = null;
startPosition = null;
elevating = false;
}
function animationFinished() {
resetPositions();
// Stop music!
if( mainAudio ) {
mainAudio.pause();
mainAudio.currentTime = 0;
}
if( endAudio ) {
endAudio.play();
}
}
function onWindowBlur() {
// If animating, go straight to the top. And play no more music.
if( elevating ) {
cancelAnimationFrame( animation );
resetPositions();
if( mainAudio ) {
mainAudio.pause();
mainAudio.currentTime = 0;
}
window.scrollTo(0, 0);
}
}
function bindElevateToElement( element ) {
element.addEventListener('click', elevate, false);
}
function main( options ) {
// Bind to element click event, if need be.
body = document.body;
if( options.element ) {
bindElevateToElement( options.element );
}
if( options.duration ) {
customDuration = true;
duration = options.duration;
}
if( options.mainAudio ) {
mainAudio = new Audio( options.mainAudio );
mainAudio.setAttribute( 'preload', 'true' ); //@TODO: Option to not preload audio.
mainAudio.setAttribute( 'loop', 'true' );
}
if( options.endAudio ) {
endAudio = new Audio( options.endAudio );
endAudio.setAttribute( 'preload', 'true' );
}
window.addEventListener('blur', onWindowBlur, false);
}
return extend(main, {
elevate: elevate
});
})();

// Elevator script included on the page, already.

window.onload = function() {
  var elevator = new Elevator({
    element: document.querySelector('.elevator-button'),
    mainAudio: 'https://raw.githubusercontent.com/tholman/elevator.js/master/demo/music/elevator-music.mp3',
    endAudio: 'https://raw.githubusercontent.com/tholman/elevator.js/master/demo/music/ding.mp3'
  });
};