https://wiki.industrial-craft.net/index.php?action=history&feed=atom&title=User%3AChocohead%2FLift.js
User:Chocohead/Lift.js - Revision history
2026-10-16T17:46:10Z
Revision history for this page on the wiki
MediaWiki 1.37.1
https://wiki.industrial-craft.net/index.php?title=User:Chocohead/Lift.js&diff=17925&oldid=prev
Chocohead: This should reload the music to avoid it bugging when first called
2015-04-22T20:06:03Z
<p>This should reload the music to avoid it bugging when first called</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 20:06, 22 April 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l135">Line 135:</td>
<td colspan="2" class="diff-lineno">Line 135:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>if( options.mainAudio ) {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>if( options.mainAudio ) {</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>mainAudio = <del style="font-weight: bold; text-decoration: none;">new Audio( </del>options.mainAudio <del style="font-weight: bold; text-decoration: none;">);</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> </ins>mainAudio = options.mainAudio;</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">mainAudio.setAttribute( 'preload', 'true' ); //@TODO: Option to not preload audio.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">mainAudio.setAttribute( 'loop', 'true' )</del>;</div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>if( options.endAudio ) {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>if( options.endAudio ) {</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>endAudio = <del style="font-weight: bold; text-decoration: none;">new Audio( </del>options.endAudio <del style="font-weight: bold; text-decoration: none;">);</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> </ins>endAudio = options.endAudio;</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">endAudio.setAttribute( 'preload', 'true' )</del>;</div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>window.addEventListener('blur', onWindowBlur, false);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>window.addEventListener('blur', onWindowBlur, false);</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l153">Line 153:</td>
<td colspan="2" class="diff-lineno">Line 150:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br/></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>window.onload = function() {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>window.onload = function() {</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> var elevator </del>= new <del style="font-weight: bold; text-decoration: none;">Elevator</del>(<del style="font-weight: bold; text-decoration: none;">{</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> moving </ins>= new <ins style="font-weight: bold; text-decoration: none;">Audio</ins>('/images/f/f4/Lift-Music.mp3<ins style="font-weight: bold; text-decoration: none;">');</ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> element: document.querySelector('.elevator-button'),</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> moving.setAttribute( 'preload', 'true' );</ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> mainAudio: </del>'/images/f/f4/Lift-Music.mp3',</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> moving.setAttribute( 'loop</ins>', <ins style="font-weight: bold; text-decoration: none;">'true' );</ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> endAudio: </del>'/images/2/28/Ding.mp3'</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> end = new Audio(</ins>'/images/2/28/Ding.mp3'<ins style="font-weight: bold; text-decoration: none;">);</ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;"> </del>});</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> end.setAttribute( 'preload', 'true' );</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> var elevator = new Elevator({</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> element: document.querySelector('.elevator-button'),</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> mainAudio: moving,</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> endAudio: end</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> </ins>});</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>};</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>};</div></td></tr>
</table>
Chocohead
https://wiki.industrial-craft.net/index.php?title=User:Chocohead/Lift.js&diff=17924&oldid=prev
Chocohead: Changed music to use it internally, but I'm not sure if it's actually going to work
2015-04-22T19:49:28Z
<p>Changed music to use it internally, but I'm not sure if it's actually going to work</p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 19:49, 22 April 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l155">Line 155:</td>
<td colspan="2" class="diff-lineno">Line 155:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var elevator = new Elevator({</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var elevator = new Elevator({</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> element: document.querySelector('.elevator-button'),</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> element: document.querySelector('.elevator-button'),</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> mainAudio: '<del style="font-weight: bold; text-decoration: none;">https://raw.githubusercontent.com/tholman/elevator.js</del>/<del style="font-weight: bold; text-decoration: none;">master</del>/<del style="font-weight: bold; text-decoration: none;">demo</del>/<del style="font-weight: bold; text-decoration: none;">music</del>/<del style="font-weight: bold; text-decoration: none;">elevator</del>-<del style="font-weight: bold; text-decoration: none;">music</del>.mp3',</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> mainAudio: '/<ins style="font-weight: bold; text-decoration: none;">images</ins>/<ins style="font-weight: bold; text-decoration: none;">f</ins>/<ins style="font-weight: bold; text-decoration: none;">f4</ins>/<ins style="font-weight: bold; text-decoration: none;">Lift</ins>-<ins style="font-weight: bold; text-decoration: none;">Music</ins>.mp3',</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> endAudio: '<del style="font-weight: bold; text-decoration: none;">https://raw.githubusercontent.com/tholman/elevator.js</del>/<del style="font-weight: bold; text-decoration: none;">master</del>/<del style="font-weight: bold; text-decoration: none;">demo</del>/<del style="font-weight: bold; text-decoration: none;">music</del>/<del style="font-weight: bold; text-decoration: none;">ding</del>.mp3'</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> endAudio: '/<ins style="font-weight: bold; text-decoration: none;">images</ins>/<ins style="font-weight: bold; text-decoration: none;">2</ins>/<ins style="font-weight: bold; text-decoration: none;">28</ins>/<ins style="font-weight: bold; text-decoration: none;">Ding</ins>.mp3'</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> });</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> });</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>};</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>};</div></td></tr>
</table>
Chocohead
https://wiki.industrial-craft.net/index.php?title=User:Chocohead/Lift.js&diff=17918&oldid=prev
Chocohead: I'll move it here, so it can be imported, which is nice
2015-04-22T19:27:06Z
<p>I'll move it here, so it can be imported, which is nice</p>
<p><b>New page</b></p><div>var Elevator = (function() {<br />
'use strict';<br />
// Elements<br />
var body = null;<br />
// Scroll vars<br />
var animation = null;<br />
var duration = null; // ms<br />
var customDuration = false;<br />
var startTime = null;<br />
var startPosition = null;<br />
var mainAudio;<br />
var endAudio;<br />
var elevating = false;<br />
function extend( target, source ) {<br />
for ( var key in source ) {<br />
if ( !( key in target ) ) {<br />
target[ key ] = source[ key ];<br />
}<br />
}<br />
return target;<br />
}<br />
function easeInOutQuad( t, b, c, d ) {<br />
t /= d/2;<br />
if (t < 1) return c/2*t*t + b;<br />
t--;<br />
return -c/2 * (t*(t-2) - 1) + b;<br />
}<br />
/**<br />
* Main<br />
*/<br />
// Time is passed through requestAnimationFrame, what a world!<br />
function animateLoop( time ) {<br />
if(!elevating) {<br />
return; //Stop<br />
}<br />
if (!startTime) {<br />
startTime = time;<br />
}<br />
var timeSoFar = time - startTime;<br />
var easedPosition = easeInOutQuad(timeSoFar, startPosition, -startPosition, duration);<br />
window.scrollTo(0, easedPosition);<br />
if( timeSoFar < duration ) {<br />
animation = requestAnimationFrame(animateLoop);<br />
} else {<br />
animationFinished();<br />
}<br />
}<br />
// ELEVATE!<br />
// ____<br />
// .' '=====<0<br />
// |======|<br />
// |======|<br />
// [IIIIII[\--()<br />
// |_______|<br />
// C O O O D<br />
// C O O O D<br />
// C O O O D<br />
// C__O__O__O__D<br />
// [_____________]<br />
function elevate() {<br />
if( elevating ) {<br />
return;<br />
}<br />
elevating = true;<br />
startPosition = (document.documentElement.scrollTop || body.scrollTop);<br />
// No custom duration set, so we travel at pixels per millisecond. (0.75px per ms)<br />
if( !customDuration ) {<br />
duration = (startPosition * 1.5);<br />
}<br />
requestAnimationFrame( animateLoop );<br />
// Start music!<br />
if( mainAudio ) {<br />
mainAudio.play();<br />
}<br />
var cancelOnScroll = function () {<br />
animationFinished(true);<br />
if (document.removeEventListener) {<br />
document.removeEventListener("mousewheel", cancelOnScroll, false); // IE9+, Chrome, Safari, Opera<br />
document.removeEventListener("DOMMouseScroll", cancelOnScroll, false); // Firefox<br />
}else{<br />
document.detachEvent("onmousewheel", cancelOnScroll); // IE 6/7/8<br />
}<br />
};<br />
if (document.addEventListener) {<br />
// IE9+, Chrome, Safari, Opera<br />
document.addEventListener("mousewheel", cancelOnScroll, false);<br />
// Firefox<br />
document.addEventListener("DOMMouseScroll", cancelOnScroll, false);<br />
}<br />
// IE 6/7/8<br />
else {<br />
document.attachEvent("onmousewheel", cancelOnScroll);<br />
}<br />
}<br />
function resetPositions() {<br />
startTime = null;<br />
startPosition = null;<br />
elevating = false;<br />
}<br />
function animationFinished() {<br />
resetPositions();<br />
// Stop music!<br />
if( mainAudio ) {<br />
mainAudio.pause();<br />
mainAudio.currentTime = 0;<br />
}<br />
if( endAudio ) {<br />
endAudio.play();<br />
}<br />
}<br />
function onWindowBlur() {<br />
// If animating, go straight to the top. And play no more music.<br />
if( elevating ) {<br />
cancelAnimationFrame( animation );<br />
resetPositions();<br />
if( mainAudio ) {<br />
mainAudio.pause();<br />
mainAudio.currentTime = 0;<br />
}<br />
window.scrollTo(0, 0);<br />
}<br />
}<br />
function bindElevateToElement( element ) {<br />
element.addEventListener('click', elevate, false);<br />
}<br />
function main( options ) {<br />
// Bind to element click event, if need be.<br />
body = document.body;<br />
if( options.element ) {<br />
bindElevateToElement( options.element );<br />
}<br />
if( options.duration ) {<br />
customDuration = true;<br />
duration = options.duration;<br />
}<br />
if( options.mainAudio ) {<br />
mainAudio = new Audio( options.mainAudio );<br />
mainAudio.setAttribute( 'preload', 'true' ); //@TODO: Option to not preload audio.<br />
mainAudio.setAttribute( 'loop', 'true' );<br />
}<br />
if( options.endAudio ) {<br />
endAudio = new Audio( options.endAudio );<br />
endAudio.setAttribute( 'preload', 'true' );<br />
}<br />
window.addEventListener('blur', onWindowBlur, false);<br />
}<br />
return extend(main, {<br />
elevate: elevate<br />
});<br />
})();<br />
<br />
// Elevator script included on the page, already.<br />
<br />
window.onload = function() {<br />
var elevator = new Elevator({<br />
element: document.querySelector('.elevator-button'),<br />
mainAudio: 'https://raw.githubusercontent.com/tholman/elevator.js/master/demo/music/elevator-music.mp3',<br />
endAudio: 'https://raw.githubusercontent.com/tholman/elevator.js/master/demo/music/ding.mp3'<br />
});<br />
};</div>
Chocohead