|
|
|
@ -9,7 +9,7 @@ |
|
|
|
|
* Elevator.js |
|
|
|
|
*********************************************/ |
|
|
|
|
|
|
|
|
|
var Elevator = (function() { |
|
|
|
|
var Elevator = function(options) { |
|
|
|
|
|
|
|
|
|
'use strict'; |
|
|
|
|
|
|
|
|
@ -22,33 +22,44 @@ var Elevator = (function() { |
|
|
|
|
var customDuration = false; |
|
|
|
|
var startTime = null; |
|
|
|
|
var startPosition = null; |
|
|
|
|
var endPosition = 0; |
|
|
|
|
var elevating = false; |
|
|
|
|
|
|
|
|
|
var mainAudio; |
|
|
|
|
var endAudio; |
|
|
|
|
|
|
|
|
|
var elevating = false; |
|
|
|
|
|
|
|
|
|
var that = this; |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Utils |
|
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
// Soft object augmentation
|
|
|
|
|
function extend( target, source ) { |
|
|
|
|
for ( var key in source ) { |
|
|
|
|
if ( !( key in target ) ) { |
|
|
|
|
target[ key ] = source[ key ]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return target; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
// Thanks Mr Penner - http://robertpenner.com/easing/
|
|
|
|
|
function easeInOutQuad( t, b, c, d ) { |
|
|
|
|
t /= d/2; |
|
|
|
|
if (t < 1) return c/2*t*t + b; |
|
|
|
|
t /= d / 2; |
|
|
|
|
if ( t < 1 ) return c / 2 * t * t + b; |
|
|
|
|
t--; |
|
|
|
|
return -c/2 * (t*(t-2) - 1) + b; |
|
|
|
|
}; |
|
|
|
|
return -c / 2 * ( t * ( t -2 ) - 1 ) + b; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function extendParameters(options, defaults){ |
|
|
|
|
for( var option in defaults ){ |
|
|
|
|
var t = options[option] === undefined && typeof option !== "function"; |
|
|
|
|
if(t){ |
|
|
|
|
options[option] = defaults[option]; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
return options; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function getVerticalOffset(element) { |
|
|
|
|
var verticalOffset = 0; |
|
|
|
|
while( element ){ |
|
|
|
|
verticalOffset += element.offsetTop || 0; |
|
|
|
|
element = element.offsetParent; |
|
|
|
|
} |
|
|
|
|
return verticalOffset; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
* Main |
|
|
|
@ -56,13 +67,13 @@ var Elevator = (function() { |
|
|
|
|
|
|
|
|
|
// Time is passed through requestAnimationFrame, what a world!
|
|
|
|
|
function animateLoop( time ) { |
|
|
|
|
if (!startTime) { |
|
|
|
|
if ( !startTime ) { |
|
|
|
|
startTime = time; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
var timeSoFar = time - startTime; |
|
|
|
|
var easedPosition = easeInOutQuad(timeSoFar, startPosition, -startPosition, duration);
|
|
|
|
|
|
|
|
|
|
var easedPosition = easeInOutQuad(timeSoFar, startPosition, endPosition - startPosition, duration); |
|
|
|
|
|
|
|
|
|
window.scrollTo(0, easedPosition); |
|
|
|
|
|
|
|
|
|
if( timeSoFar < duration ) { |
|
|
|
@ -70,7 +81,7 @@ var Elevator = (function() { |
|
|
|
|
} else { |
|
|
|
|
animationFinished(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// ELEVATE!
|
|
|
|
|
// /
|
|
|
|
@ -85,7 +96,7 @@ var Elevator = (function() { |
|
|
|
|
// C O O O D
|
|
|
|
|
// C__O__O__O__D
|
|
|
|
|
// [_____________]
|
|
|
|
|
function elevate() { |
|
|
|
|
this.elevate = function() { |
|
|
|
|
|
|
|
|
|
if( elevating ) { |
|
|
|
|
return; |
|
|
|
@ -93,7 +104,7 @@ var Elevator = (function() { |
|
|
|
|
|
|
|
|
|
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); |
|
|
|
@ -105,6 +116,10 @@ var Elevator = (function() { |
|
|
|
|
if( mainAudio ) { |
|
|
|
|
mainAudio.play(); |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
function browserMeetsRequirements() { |
|
|
|
|
return window.requestAnimationFrame && window.Audio && window.addEventListener; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function resetPositions() { |
|
|
|
@ -114,7 +129,7 @@ var Elevator = (function() { |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function animationFinished() { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
resetPositions(); |
|
|
|
|
|
|
|
|
|
// Stop music!
|
|
|
|
@ -141,44 +156,68 @@ var Elevator = (function() { |
|
|
|
|
mainAudio.currentTime = 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
window.scrollTo(0, 0); |
|
|
|
|
window.scrollTo(0, endPosition); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//@TODO: Does this need tap bindings too?
|
|
|
|
|
function bindElevateToElement( element ) { |
|
|
|
|
element.addEventListener('click', elevate, false); |
|
|
|
|
if( element.addEventListener ) { |
|
|
|
|
element.addEventListener('click', that.elevate, false); |
|
|
|
|
} else { |
|
|
|
|
// Older browsers
|
|
|
|
|
element.attachEvent('onclick', function() { |
|
|
|
|
document.documentElement.scrollTop = endPosition; |
|
|
|
|
document.body.scrollTop = endPosition; |
|
|
|
|
window.scroll(0, endPosition); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function main( options ) { |
|
|
|
|
|
|
|
|
|
function init( _options ) { |
|
|
|
|
// Bind to element click event, if need be.
|
|
|
|
|
body = document.body; |
|
|
|
|
|
|
|
|
|
if( options.element ) { |
|
|
|
|
bindElevateToElement( options.element ); |
|
|
|
|
var defaults = { |
|
|
|
|
duration: undefined, |
|
|
|
|
mainAudio: false, |
|
|
|
|
endAudio: false, |
|
|
|
|
preloadAudio: true, |
|
|
|
|
loopAudio: true, |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
_options = extendParameters(_options, defaults); |
|
|
|
|
|
|
|
|
|
if( _options.element ) { |
|
|
|
|
bindElevateToElement( _options.element ); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if( options.duration ) { |
|
|
|
|
customDuration = true; |
|
|
|
|
duration = options.duration; |
|
|
|
|
// Take the stairs instead
|
|
|
|
|
if( !browserMeetsRequirements() ) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if( options.mainAudio ) { |
|
|
|
|
mainAudio = new Audio( options.mainAudio ); |
|
|
|
|
mainAudio.setAttribute( 'preload', 'true' ); //@TODO: Option to not preload audio.
|
|
|
|
|
mainAudio.setAttribute( 'loop', 'true' ); |
|
|
|
|
if( _options.duration ) { |
|
|
|
|
customDuration = true; |
|
|
|
|
duration = _options.duration; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if( options.endAudio ) { |
|
|
|
|
endAudio = new Audio( options.endAudio ); |
|
|
|
|
endAudio.setAttribute( 'preload', 'true' ); |
|
|
|
|
if( _options.targetElement ) { |
|
|
|
|
endPosition = getVerticalOffset(_options.targetElement); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
window.addEventListener('blur', onWindowBlur, false); |
|
|
|
|
|
|
|
|
|
if( _options.mainAudio ) { |
|
|
|
|
mainAudio = new Audio( _options.mainAudio ); |
|
|
|
|
mainAudio.setAttribute( 'preload', _options.preloadAudio ); |
|
|
|
|
mainAudio.setAttribute( 'loop', _options.loopAudio ); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if( _options.endAudio ) { |
|
|
|
|
endAudio = new Audio( _options.endAudio ); |
|
|
|
|
endAudio.setAttribute( 'preload', 'true' ); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return extend(main, { |
|
|
|
|
elevate: elevate |
|
|
|
|
}); |
|
|
|
|
})(); |
|
|
|
|
init(options); |
|
|
|
|
}; |
|
|
|
|