Elevator.js: A "Back to the Top" JS Plugin with Soothing Elevator Music
Join the DZone community and get the full member experience.
Join For FreeElevator.js is a standalone JavaScript library by Tim Holman. The library features straightforward usage and the result is a delightful "Back to the Top" button that brings you back to the top of the page at a relaxed pace accompanied by soothing elevator Muzak and a cheerful "DING!" when you reach the top.
Check out the demo below:
Let's take a peek at the source code to see if we can figure out what makes this library tick:
// 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(); } }
There you have it, folks.
Click the image below for more details and to use it in your site:
JavaScript library
Peek (software)
Opinions expressed by DZone contributors are their own.
Trending
-
The Role of AI and Programming in the Gaming Industry: A Look Beyond the Tables
-
Five Java Books Beginners and Professionals Should Read
-
Turbocharge Ab Initio ETL Pipelines: Simple Tweaks for Maximum Performance Boost
-
How Web3 Is Driving Social and Financial Empowerment
Comments