User:Chocohead/Lift.js
Jump to navigation
Jump to search
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 = options.mainAudio; } if( options.endAudio ) { endAudio = options.endAudio; } window.addEventListener('blur', onWindowBlur, false); } return extend(main, { elevate: elevate }); })(); // Elevator script included on the page, already. window.onload = function() { moving = new Audio('/images/f/f4/Lift-Music.mp3'); moving.setAttribute( 'preload', 'true' ); moving.setAttribute( 'loop', 'true' ); end = new Audio('/images/2/28/Ding.mp3'); end.setAttribute( 'preload', 'true' ); var elevator = new Elevator({ element: document.querySelector('.elevator-button'), mainAudio: moving, endAudio: end }); };