Fix teleport animation page location

js/main.js

@@ -287,7 +287,7 @@ window.addEventListener('scroll', function () {
         var size = (0.45 + Math.random() * 0.8).toFixed(2);
         var col  = T_COLORS[(Math.random() * T_COLORS.length) | 0];
         s.textContent = T_CHARS[(Math.random() * T_CHARS.length) | 0];
-        s.style.cssText = 'position:fixed;left:' + x + 'px;top:' + y + 'px;z-index:1200;pointer-events:none;line-height:1;'
+        s.style.cssText = 'position:absolute;left:' + x + 'px;top:' + y + 'px;z-index:90;pointer-events:none;line-height:1;'
             + 'font-size:' + size + 'rem;color:' + col + ';text-shadow:0 0 4px ' + col + ',0 0 2px rgba(255,255,255,0.95);'
             + 'will-change:transform,opacity;';
         document.body.appendChild(s);
@@ -299,8 +299,15 @@ window.addEventListener('scroll', function () {
         ], { duration: life, easing: 'ease-out' }).onfinish = function () { s.remove(); };
     }
 
+    // Convert a viewport rect into document-space, so absolutely-positioned sparkles
+    // stay anchored to the page (and scroll with it) instead of following the viewport.
+    function pageRect(rc) {
+        var l = rc.left + window.scrollX, t = rc.top + window.scrollY;
+        return { left: l, top: t, width: rc.width, height: rc.height, right: l + rc.width, bottom: t + rc.height };
+    }
+
     function teleport(img, startDelay) {
-        var r = img.getBoundingClientRect();
+        var r = pageRect(img.getBoundingClientRect());
         var START_DELAY = (typeof startDelay === 'number') ? startDelay : 500; // pause before anything happens
         var CHARGE      = 1000;   // sparkles gather along the bottom before the figure grows
         var GROW        = 2200;   // the bottom-up materialise
@@ -379,7 +386,7 @@ window.addEventListener('scroll', function () {
 
     // Reverse "beam out": dissolve top-down into a puff of sparkles, then stay hidden
     function dematerialize(img, done) {
-        var r = img.getBoundingClientRect();
+        var r = pageRect(img.getBoundingClientRect());
         var DUR = 800;
         var baseShadow = 'drop-shadow(0 8px 24px rgba(0,0,0,0.35))';
         var start = null;