Swap DOM elements to further reduce flickering.

ariya · Dec 21, 2013 · e5d9a12 · e5d9a12
1 parent 6c98708
commit e5d9a12
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/4/index.html b/4/index.html
@@ -10,9 +10,9 @@
 </head>
 <body>
   <div class="pure-g" id="content">
-      <img id="left" class="card" style="z-index: 2">
-      <img id="center" class="card" style="z-index: 1">
-      <img id="right" class="card" style="z-index: 2">
+      <img id="1" class="leftcard">
+      <img id="2" class="centercard">
+      <img id="3" class="rightcard">
   </div>
   <div id="stash"></div>
 </body>

diff --git a/4/scroll.js b/4/scroll.js
@@ -11,23 +11,22 @@ window.onload = function () {
 
         count = 10;
         images = [];
-        index = 5;
+        index = 0;
         offset = 0;
         timeConstant = 125; // ms
         pressed = false;
 
         snap = window.innerWidth;
 
         view = document.getElementById('content');
-        left = document.getElementById('left');
-        center = document.getElementById('center');
-        right = document.getElementById('right');
+        left = document.getElementById('1');
+        center = document.getElementById('2');
+        right = document.getElementById('3');
 
         left.setAttribute('width', snap + 'px');
         center.setAttribute('width', snap + 'px');
         right.setAttribute('width', snap + 'px');
 
-
         // Predownloads some images.
         stash = document.getElementById('stash');
         for (i = 0; i < count; ++i) {
@@ -64,13 +63,24 @@ window.onload = function () {
     }
 
     function display(i) {
-        offset = 0;
-        index = i;
-        center.style[xform] = 'translate3d(0, 0, 0)';
-        center.setAttribute('src', images[wrap(index)].getAttribute('src'));
-        scroll(0);
+        var id = center.id;
+        if (i < index) {
+            id = left.id;
+            left = document.getElementById(center.id);
+        } else if (i > index) {
+            id = right.id;
+            right = document.getElementById(center.id);
+        }
+        center = document.getElementById(id);
+        index = wrap(i);
+
         left.setAttribute('src', images[wrap(index - 1)].getAttribute('src'));
+        center.setAttribute('src', images[index].getAttribute('src'));
         right.setAttribute('src', images[wrap(index + 1)].getAttribute('src'));
+        scroll(0);
+        left.setAttribute('class', 'leftcard');
+        center.setAttribute('class', 'centercard');
+        right.setAttribute('class', 'rightcard');
     }
 
     function scroll(x) {
@@ -108,7 +118,7 @@ window.onload = function () {
                 scroll(target - delta);
                 requestAnimationFrame(autoScroll);
             } else {
-                display(wrap(index + target / snap));
+                display(index + target / snap);
             }
         }
     }

diff --git a/css/style.css b/css/style.css
@@ -72,10 +72,25 @@ tr:nth-child(2n-1).blue td, tr.blue td {
   color: #fff;
 }
 
-img.card {
+img.leftcard {
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 2;
+}
+
+img.centercard {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
+}
+
+img.rightcard {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
 }
 
 div#stash {