elevator.js alternatives and similar libraries
Based on the "Scroll" category.
Alternatively, view elevator.js alternatives based on common mentions on social networks and blogs.
-
fullPage
fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple -
skrollr
Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. -
iscroll
iScroll is a high performance, small footprint, dependency free, multi-platform javascript scroller. -
parallax
Parallax Engine that reacts to the orientation of a smart device -
ScrollMagic
The javascript library for magical scroll interactions. -
onepage-scroll
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin -
headroom
Give your pages some headroom. Hide your header until you need it -
vue-virtual-scroller
⚡️ Blazing fast scrolling for any amount of data -
locomotive-scroll
🛤 Detection of elements in viewport & smooth scrolling with parallax. -
Clusterize.js
Tiny vanilla JS plugin to display large data sets easily -
scrollMonitor
A simple and fast API to monitor elements as you scroll -
simpleParallax
Simple and tiny JavaScript library that adds parallax animations on any images -
angular-infinite-list
A short and powerful infinite scroll list library for angular, with zero dependencies -
MiniBar
A lightweight scrollbar library written in vanilla javascript. -
Trig.js
The easy way to create CSS scroll animations that react to the position of your HTML element on screen. Animate on scroll (AOS) your CSS.
AWS Cloud-aware infrastructure-from-code toolbox [NEW]
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of elevator.js or a related project?
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!
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.
<script>
// 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();
</script>
You can also add an "element" option, clicking this element will invoke the "Scroll to top" functionality, we all love and crave.
<div class="elevator-button">Back to Top</div>
<script>
// 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'
});
}
</script>
If you don't want to scroll to the top, a custom target can be specified by adding a "targetElement" option:
<div class="elevator-button">Take the elevator to the target</div>
<script>
// 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'
});
}
</script>
If you want to scroll to a point on the page with some extra padding on the top, simply add the "verticalPadding" option:
<div class="elevator-button">Take the elevator to the target</div>
<script>
// 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'
});
}
</script>
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
<div class="elevator-button">Back to Top</div>
<script>
// Elevator script included on the page, already.
window.onload = function() {
var elevator = new Elevator({
element: document.querySelector('.elevator-button'),
duration: 1000 // milliseconds
});
}
</script>
If you use elevator.js in combination with other code, you might want to use callbacks
<script>
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
}
});
}
</script>
NPM
The package is also available via NPM
License
Elevator.js is covered by the MIT License.
Audio in the Demo was bought via Pond5, you will need to license your own.
Copyright (C) ~ Tim Holman ~ [email protected]
*Note that all licence references and agreements mentioned in the elevator.js README section above
are relevant to that project's source code only.