added link to blogpost to blog headline, also some cleaning, we cant have more than 4 navigation points
This commit is contained in:
131
js/elevator.js
131
js/elevator.js
@ -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 ) {
|
||||
// Take the stairs instead
|
||||
if( !browserMeetsRequirements() ) {
|
||||
return;
|
||||
}
|
||||
|
||||
if( _options.duration ) {
|
||||
customDuration = true;
|
||||
duration = options.duration;
|
||||
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' );
|
||||
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);
|
||||
};
|
||||
|
Reference in New Issue
Block a user