diff --git a/demo/index.html b/demo/index.html index 331baff..48d7503 100644 --- a/demo/index.html +++ b/demo/index.html @@ -92,6 +92,14 @@

Elevator.js

+
+
+
+
+
+
+
+ Fork me on GitHub @@ -102,6 +110,7 @@

Elevator.js

var elementButton = document.querySelector('.elevator'); var elevator = new Elevator({ element: elementButton, + doors: [document.getElementById('door-left'), document.getElementById('door-right')], mainAudio: './music/elevator.mp3', // Music from http://www.bensound.com/ endAudio: './music/ding.mp3' }); diff --git a/elevator.js b/elevator.js index 7b8be25..af9955f 100644 --- a/elevator.js +++ b/elevator.js @@ -14,10 +14,12 @@ var Elevator = function(options) { // Elements var body = null; + var doors = null; // Scroll vars var animation = null; var duration = null; // ms + var doorsDurationRatio = null; var customDuration = false; var startTime = null; var startPosition = null; @@ -81,14 +83,49 @@ var Elevator = function(options) { } var timeSoFar = time - startTime; - var easedPosition = easeInOutQuad( - timeSoFar, - startPosition, - endPosition - startPosition, - duration - ); + + var easedPosition = startPosition, doorsPosition = -1; + + if (!doors) { + // No doors - keep your limbs inside the car at all times! + easedPosition = easeInOutQuad( + timeSoFar, + startPosition, + endPosition - startPosition, + duration + ); + } else if (timeSoFar < doorsDurationRatio * duration) { + // Close doors + doorsPosition = easeInOutQuad( + timeSoFar, + -52, + 51, + doorsDurationRatio * duration + ); + } else if(timeSoFar < (1 - doorsDurationRatio) * duration) { + // Safe operation, doors closed + easedPosition = easeInOutQuad( + timeSoFar - doorsDurationRatio * duration, + startPosition, + endPosition - startPosition, + duration * (1 - 2 * doorsDurationRatio) + ); + } else { + // Open doors + easedPosition = endPosition; + doorsPosition = easeInOutQuad( + timeSoFar - (1 - doorsDurationRatio) * duration, + -1, + -51, + doorsDurationRatio * duration + ); + } window.scrollTo(0, easedPosition); + if (doors) { + doors[0].style.left = doorsPosition + 'vw'; + doors[1].style.right = doorsPosition + 'vw'; + } if (timeSoFar < duration) { animation = requestAnimationFrame(animateLoop); @@ -121,7 +158,8 @@ var Elevator = function(options) { // No custom duration set, so we travel at pixels per millisecond. (0.75px per ms) if (!customDuration) { - duration = Math.abs(endPosition - startPosition) * 1.5; + duration = Math.abs(endPosition - startPosition) * 1.5 + 1000; + doorsDurationRatio = 500 / duration; } requestAnimationFrame(animateLoop); @@ -215,6 +253,7 @@ var Elevator = function(options) { var defaults = { duration: undefined, + doorsDurationRatio: 0.1, mainAudio: false, endAudio: false, preloadAudio: true, @@ -229,6 +268,14 @@ var Elevator = function(options) { bindElevateToElement(_options.element); } + if (_options.doors) { + doors = _options.doors; + } + + if (_options.doorsDurationRatio) { + doorsDurationRatio = _options.doorsDurationRatio; + } + if (_options.duration) { customDuration = true; duration = _options.duration;