Better animation

_sass/pages.scss

@@ -336,10 +336,11 @@ $header-height: 54px;
         margin-top: 1.5em;
         margin-bottom: 0;
         font-weight: 300;
+        font-size: 1.1em;
     }
 
     .el-github {
-        margin-top: 0.5em;
+        margin-top: 1em;
     }
 
     a.github-button {
@@ -355,7 +356,7 @@ $header-height: 54px;
         }
 
         border-radius: 2px;
-        padding: 5px 10px;
+        padding: 7px 10px;
     }
 
     .columns-container {
@@ -407,11 +408,20 @@ $header-height: 54px;
     .el-image {
         width: 100%;
         padding-bottom: 56%;
-        background-position: center;
-        background-color: black;
-        background-size: contain;
-        background-repeat: no-repeat;
         border-radius: 2px;
+        position: relative;
+        background-color: black;
+        & > div {
+            background-color: black;
+            border-radius: 2px;
+            background-position: center;
+            background-size: contain;
+            background-repeat: no-repeat;
+            position: absolute;
+            left: 0; right: 0; top: 0; bottom: 0;
+            opacity: 0;
+            transition: opacity 0.5s linear;
+        }
     }
 }
 

index.html

@@ -26,7 +26,7 @@ blackfooter: true
     Free and Open Source from Microsoft Research
   </p>
   <p class="el-github">
-    <a class="github-button" href="https://github.com/Microsoft/charticulator" aria-label="Microsoft/charticulator on GitHub">Browser the Source Code</a>
+    <a class="github-button" href="https://github.com/Microsoft/charticulator" aria-label="Microsoft/charticulator on GitHub">Browse the Source Code</a>
   </p>
 </section>
 
@@ -64,21 +64,49 @@ blackfooter: true
             "{{ '/images/gallery/polio.png' | thumbnail_image: '640x480^' | cdn_url }}",
             "{{ '/images/gallery/world_greenhouse_gas_emissions.png' | thumbnail_image: '640x480^' | cdn_url }}"
           ];
+          function switchToImage(img) {
+            let oldElements = Array.from(document.getElementById("img-slideshow").children);
+            let div = document.createElement("div");
+            document.getElementById("img-slideshow").append(div);
+            div.style.backgroundImage = "url(" + img.src + ")";
+            window.getComputedStyle(div).opacity;
+            div.style.opacity = 1;
+            setTimeout(function() {
+              oldElements.forEach(function(e) { e.remove(); });
+            }, 500);
+          }
+          function loadImage(imageURL, callback) {
+            let img = new Image();
+            let isCanceled = false;
+            let timeout = setTimeout(function() {
+              isCanceled = true;
+              callback();
+            }, 5000);
+            img.onload = () => {
+              if(!isCanceled) {
+                clearTimeout(timeout);
+                callback();
+                switchToImage(img);
+              }
+            };
+            img.src = imageURL;
+          }
+          // Switch images randomly
+          let currentImage = null;
           function randomSwitchImage() {
-            let imageElement = document.getElementById("img-slideshow");
-            let bgImage = imageElement.style.backgroundImage;
             while(true) {
               let index = Math.floor(Math.random() * imageList.length);
               if(index < imageList.length) {
-                let newURL = "url(" + imageList[index] + ")";
-                if(newURL != bgImage) {
-                  imageElement.style.backgroundImage = newURL;
+                if(imageList[index] != currentImage) {
+                  currentImage = imageList[index];
+                  loadImage(currentImage, function() {
+                    setTimeout(randomSwitchImage, 3000)
+                  });
                   break;
                 }
               }
             }
           }
-          setInterval(randomSwitchImage, 3000);
           randomSwitchImage();
         })();
       </script>