Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tholman/elevator.js
Finally, a "back to top" button that behaves like a real elevator.
https://github.com/tholman/elevator.js
Last synced: about 2 months ago
JSON representation
Finally, a "back to top" button that behaves like a real elevator.
- Host: GitHub
- URL: https://github.com/tholman/elevator.js
- Owner: tholman
- Created: 2015-04-12T15:21:40.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-06-26T15:20:00.000Z (about 4 years ago)
- Last Synced: 2024-07-18T19:14:18.422Z (2 months ago)
- Language: JavaScript
- Homepage: http://tholman.com/elevator.js
- Size: 4.02 MB
- Stars: 6,628
- Watchers: 114
- Forks: 500
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome - tholman/elevator.js - Finally, a "back to top" button that behaves like a real elevator. (JavaScript)
- awesome-dev-fun - Elevator.js - Finally, a "back to top" button that behaves like a real elevator. (JavaScript)
README
# elevator.js
Finally, a "back to top" button that behaves like a real elevator, by adding elevator music to quietly soothe the awkwardness that can ensue when being smoothly scrolled to the top of the screen.This is very serious stuff, [here's a demo](http://tholman.com/elevator.js)!
### Instructions
`Elevator.js` is a stand alone library (no jquery, or the likes) so usage is pretty straight forward. All styling of elements is up to you. `Elevator.js` only handles the audio management, and the scroll functionality!
#### JS
`Elevator.js` lives entirely within the js realm, which makes things fairly simple to use.
You'll need to create a new instance of `Elevator`, and pass it some audio elements.
```html
// Elevator script included on the page, already.
window.onload = function() {
var elevator = new Elevator({
mainAudio: '/src/to/audio.mp3',
endAudio: '/src/to/end-audio.mp3'
});
}// You can run the elevator, by calling.
elevator.elevate();```
You can also add an "element" option, clicking this element will invoke the "Scroll to top" functionality, we all love and crave.
```html// Elevator script included on the page, already.
window.onload = function() {
var elevator = new Elevator({
element: document.querySelector('.elevator-button'),
mainAudio: '/src/to/audio.mp3',
endAudio: '/src/to/end-audio.mp3'
});
}```
If you don't want to scroll to the top, a custom target can be specified by adding a "targetElement" option:
```html// Elevator script included on the page, already.
window.onload = function() {
var elevator = new Elevator({
element: document.querySelector('.elevator-button'),
targetElement: document.querySelector('#elevator-target'),
mainAudio: '/src/to/audio.mp3',
endAudio: '/src/to/end-audio.mp3'
});
}```
If you want to scroll to a point on the page with some extra padding on the top, simply add the "verticalPadding" option:
```html
// Elevator script included on the page, already.
window.onload = function() {
var elevator = new Elevator({
element: document.querySelector('.elevator-button'),
targetElement: document.querySelector('#elevator-target'),
verticalPadding: 100, // in pixels
mainAudio: '/src/to/audio.mp3',
endAudio: '/src/to/end-audio.mp3'
});
}```
If you're really serious (boring), you don't have to use audio... and can also set a fixed time to scroll to the top
```html// Elevator script included on the page, already.
window.onload = function() {
var elevator = new Elevator({
element: document.querySelector('.elevator-button'),
duration: 1000 // milliseconds
});
}```
If you use elevator.js in combination with other code, you might want to use callbacks
```htmlwindow.onload = function() {
new Elevator({
element: document.querySelector('.elevator-button'),
mainAudio: '/src/to/audio.mp3',
endAudio: '/src/to/end-audio.mp3',
duration: 5000,
startCallback: function() {
// is called, when the elevator starts moving
},
endCallback: function() {
// is called, when the elevator reached target level
}
});
}```
### NPM
The package is also available via [NPM](https://www.npmjs.com/package/elevator.js)### License
Elevator.js is covered by the MIT License.
Audio in the Demo was bought via [Pond5](https://www.pond5.com/stock-music/11517192/elevator-bossa-nova.html), you will need to license your own.
Copyright (C) ~ [Tim Holman](http://tholman.com) ~ [email protected]