【Javascript】トップに戻るボタンを押すと音楽が流れ、エレベーターのようにスクロールElevator.js

Elevator.jsはトップに戻るボタンをクリックすると音楽が流れ、ゆっくりトップへスクロールするプラグイン。

JS

<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>
<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>
<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>
<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>
<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>
<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>

MITライセンス

 
elevator.js

【Javascript】トップに戻るボタンを押すと音楽が流れ、エレベーターのようにスクロールElevator.js

  • LATEST
  • RELATED
  • POPULAR