Improved image manipulation and loading

6 files changed, 21 insertions, 20 deletions

diff --git a/images/dog_and_me-min.jpg b/images/dog_and_me-min.jpg
index 984996c..6e4e040 100644
--- a/images/dog_and_me-min.jpg
+++ b/images/dog_and_me-min.jpg
diff --git a/images/friends-min.jpg b/images/friends-min.jpg
index 2f39ff6..0fbb4c1 100644
--- a/images/friends-min.jpg
+++ b/images/friends-min.jpg
diff --git a/images/portrait-min.jpg b/images/portrait-min.jpg
index 391267f..49e8cde 100644
--- a/images/portrait-min.jpg
+++ b/images/portrait-min.jpg
diff --git a/index.css b/index.css
index 080bcac..2d0e746 100644
--- a/index.css
+++ b/index.css
@@ -107,17 +107,19 @@ section a:hover {
     display: flex;
     flex-direction: row;
     height: 100%;
-    transition: transform 50ms linear;
+    transition: all 100ms linear;
+    opacity: 0;
 }
 
 #image_container .carousel_image {
     width: 240px;
-    transition: opacity 50ms linear;
+    transition: opacity 100ms linear;
     padding: 0;
     margin: 0;
     padding-right: 12px;
     cursor: pointer;
     position: relative;
+    opacity: 0;
 }
 
 #image_container .carousel_image:hover::after {
@@ -203,6 +205,14 @@ input:focus {
 	display: flex;
 	align-items: center;
 	bottom: 1rem;
+    pointer-events: all;
+    opacity: 1;
+    transition: opacity 150ms linear;
+}
+
+#theme_selector.hidden {
+    pointer-events: none;
+    opacity: 0;
 }
 
 #theme_selector > button {
diff --git a/index.html b/index.html
index eb7f9c5..a5f093a 100644
--- a/index.html
+++ b/index.html
@@ -69,7 +69,7 @@
     </section>
 
     <h2>Theme</h2>
-    <div id="theme_selector">
+    <div id="theme_selector" class="hidden">
       <button id="theme_button_default">Default</button>
       <button id="theme_button_autumn">Autumn</button>
     </div>
diff --git a/index.js b/index.js
index 7304870..acdbe49 100644
--- a/index.js
+++ b/index.js
@@ -1,22 +1,9 @@
 
 function main() {
-    runCarousel();
+    var themeSelector = document.getElementById('theme_selector');
+    themeSelector.classList.remove('hidden');
 
-    // // -- Note! We require a black background to properly see the WebGL, so we handle that here.
-    // var themeElement = document.getElementById('theme_container');
-    // var themeButtonList = document.querySelectorAll('#theme_selector > button');
-    // themeButtonList.forEach(function(themeButton) {
-    //     if (themeButton.id !== 'theme_button_default') {
-    //         themeButton.addEventListener('click', function() {
-    //             themeElement.style.background = 'black';  
-    //         });
-    //     }
-    //     else {
-    //         themeButton.addEventListener('click', function() {
-    //             themeElement.style.background = 'white';  
-    //         });
-    //     }
-    // });
+    runCarousel();
 }
 
 function runCarousel() {
@@ -54,6 +41,7 @@ function runCarousel() {
         background.append(clone);
         clone.addEventListener('click', function(event) { event.stopPropagation(); });
         background.addEventListener('click', function() { background.remove(); });
+        window.addEventListener('keydown', function(e) { if (e.key === 'Escape') background.remove(); });
         document.body.parentElement.prepend(background);
     }
 
@@ -95,6 +83,9 @@ function runCarousel() {
 
     leftButton.addEventListener('click', onCarouselLeft);
     rightButton.addEventListener('click', onCarouselRight);
+
+    // -- Fade in the container
+    imageContainer.style.opacity = '1';
 }
 
-document.onload = main;
+window.onload = main;