https://github.com/sudo-self/elevator.js
elevator.js
https://github.com/sudo-self/elevator.js
Last synced: about 1 year ago
JSON representation
elevator.js
- Host: GitHub
- URL: https://github.com/sudo-self/elevator.js
- Owner: sudo-self
- Created: 2023-09-24T02:22:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-24T05:08:48.000Z (over 2 years ago)
- Last Synced: 2025-01-24T14:47:01.343Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://elevator.jessejesse.com
- Size: 783 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# elevator.js <---- try me
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.
# 
### 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
```html
window.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
}
});
}
```