From c117b93ae7aaf44b294ce7dfc676895e29f11022 Mon Sep 17 00:00:00 2001 From: Remi Rampin Date: Fri, 26 Jun 2020 10:43:29 -0400 Subject: [PATCH 1/4] Add elevator doors --- demo/index.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/demo/index.html b/demo/index.html index 331baff..e72174a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -92,6 +92,14 @@

Elevator.js

+
+
+
+
+
+
+
+ Fork me on GitHub From 6a4652ec2cc13a85fe2fa10c85afcd9ac81e7bb8 Mon Sep 17 00:00:00 2001 From: Remi Rampin Date: Fri, 26 Jun 2020 11:05:32 -0400 Subject: [PATCH 2/4] Animate doors --- demo/index.html | 5 +++-- elevator.js | 52 +++++++++++++++++++++++++++++++++++++++++++------ 2 files changed, 49 insertions(+), 8 deletions(-) diff --git a/demo/index.html b/demo/index.html index e72174a..48d7503 100644 --- a/demo/index.html +++ b/demo/index.html @@ -92,11 +92,11 @@

Elevator.js

-
+
-
+
@@ -110,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..31b4540 100644 --- a/elevator.js +++ b/elevator.js @@ -14,6 +14,7 @@ var Elevator = function(options) { // Elements var body = null; + var doors = null; // Scroll vars var animation = null; @@ -81,14 +82,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 < 0.1 * duration) { + // Close doors + doorsPosition = easeInOutQuad( + timeSoFar, + -52, + 51, + 0.1 * duration + ); + } else if(timeSoFar < 0.9 * duration) { + // Safe operation, doors closed + easedPosition = easeInOutQuad( + timeSoFar - 0.1 * duration, + startPosition, + endPosition - startPosition, + duration * 0.8 + ); + } else { + // Open doors + easedPosition = endPosition; + doorsPosition = easeInOutQuad( + timeSoFar - 0.9 * duration, + -1, + -51, + 0.1 * 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); @@ -229,6 +265,10 @@ var Elevator = function(options) { bindElevateToElement(_options.element); } + if (_options.doors) { + doors = _options.doors; + } + if (_options.duration) { customDuration = true; duration = _options.duration; From 5994fd8fefeb3ff1a9333edaa402dfecbe7fabf6 Mon Sep 17 00:00:00 2001 From: Remi Rampin Date: Fri, 26 Jun 2020 11:07:47 -0400 Subject: [PATCH 3/4] Add setting for doors duration --- elevator.js | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/elevator.js b/elevator.js index 31b4540..0c118b9 100644 --- a/elevator.js +++ b/elevator.js @@ -19,6 +19,7 @@ var Elevator = function(options) { // Scroll vars var animation = null; var duration = null; // ms + var doorsDurationRatio = null; var customDuration = false; var startTime = null; var startPosition = null; @@ -93,30 +94,30 @@ var Elevator = function(options) { endPosition - startPosition, duration ); - } else if (timeSoFar < 0.1 * duration) { + } else if (timeSoFar < doorsDurationRatio * duration) { // Close doors doorsPosition = easeInOutQuad( timeSoFar, -52, 51, - 0.1 * duration + doorsDurationRatio * duration ); - } else if(timeSoFar < 0.9 * duration) { + } else if(timeSoFar < (1 - doorsDurationRatio) * duration) { // Safe operation, doors closed easedPosition = easeInOutQuad( - timeSoFar - 0.1 * duration, + timeSoFar - doorsDurationRatio * duration, startPosition, endPosition - startPosition, - duration * 0.8 + duration * (1 - 2 * doorsDurationRatio) ); } else { // Open doors easedPosition = endPosition; doorsPosition = easeInOutQuad( - timeSoFar - 0.9 * duration, + timeSoFar - (1 - doorsDurationRatio) * duration, -1, -51, - 0.1 * duration + doorsDurationRatio * duration ); } @@ -251,6 +252,7 @@ var Elevator = function(options) { var defaults = { duration: undefined, + doorsDurationRatio: 0.1, mainAudio: false, endAudio: false, preloadAudio: true, @@ -269,6 +271,10 @@ var Elevator = function(options) { doors = _options.doors; } + if (_options.doorsDurationRatio) { + doorsDurationRatio = _options.doorsDurationRatio; + } + if (_options.duration) { customDuration = true; duration = _options.duration; From cb8065152627cb271ccfe7c7019c4198606f4e96 Mon Sep 17 00:00:00 2001 From: Remi Rampin Date: Fri, 26 Jun 2020 11:09:15 -0400 Subject: [PATCH 4/4] Update default duration to account for doors --- elevator.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/elevator.js b/elevator.js index 0c118b9..af9955f 100644 --- a/elevator.js +++ b/elevator.js @@ -158,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);