Difference between revisions of "User:Chocohead/Lift.js"
Jump to navigation
Jump to search
(I'll move it here, so it can be imported, which is nice) |
m (Changed music to use it internally, but I'm not sure if it's actually going to work) |
||
Line 155: | Line 155: | ||
var elevator = new Elevator({ | var elevator = new Elevator({ | ||
element: document.querySelector('.elevator-button'), | element: document.querySelector('.elevator-button'), | ||
mainAudio: ' | mainAudio: '/images/f/f4/Lift-Music.mp3', | ||
endAudio: ' | endAudio: '/images/2/28/Ding.mp3' | ||
}); | }); | ||
}; | }; |
Revision as of 19:49, 22 April 2015
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: '/images/f/f4/Lift-Music.mp3', endAudio: '/images/2/28/Ding.mp3' }); };