Calibrated

Author: MaxwellBo

index.html

@@ -2549,36 +2549,31 @@ <h2>
   <script>
     (function initMarquees() {
       var SCROLL_DELAY = 85;
-      document.querySelectorAll('.marquee').forEach(function (el) {
+
+      function calibrate(el, inner) {
         var scrollAmount = parseInt(el.getAttribute('scrollamount')) || 6;
-        var pxPerMs = scrollAmount / SCROLL_DELAY;
+        var duration = inner.offsetWidth * SCROLL_DELAY / scrollAmount;
+        inner.style.animationDuration = duration + 'ms';
+      }
 
+      document.querySelectorAll('.marquee').forEach(function (el) {
         var inner = document.createElement('span');
         inner.className = 'marquee-inner';
         while (el.firstChild) inner.appendChild(el.firstChild);
         el.appendChild(inner);
 
+        calibrate(el, inner);
+
         var observer = new MutationObserver(function (mutations) {
+          var moved = false;
           mutations.forEach(function (m) {
             Array.from(m.addedNodes).forEach(function (node) {
-              if (node !== inner) inner.appendChild(node);
+              if (node !== inner) { inner.appendChild(node); moved = true; }
             });
           });
+          if (moved) calibrate(el, inner);
         });
         observer.observe(el, { childList: true });
-
-        var pos = el.offsetWidth;
-        var last = null;
-        function step(ts) {
-          if (last === null) last = ts;
-          var dt = ts - last;
-          last = ts;
-          pos -= pxPerMs * dt;
-          if (pos < -inner.offsetWidth) pos = el.offsetWidth;
-          inner.style.transform = 'translateX(' + pos + 'px)';
-          requestAnimationFrame(step);
-        }
-        requestAnimationFrame(step);
       });
     })();
 

stylesheets/base.css

@@ -162,5 +162,11 @@ input:focus + label {
 
 .marquee-inner {
   display: inline-block;
-  will-change: transform;
+  padding-left: 100%;
+  animation: marquee-scroll linear infinite;
+}
+
+@keyframes marquee-scroll {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
 }