replace envelope svg, better font size / animation length responsiveness

1 files changed, 26 insertions, 11 deletions

diff --git a/html/index.html b/html/index.html
index b030489..fcb4b4b 100644
--- a/html/index.html
+++ b/html/index.html
@@ -29,6 +29,7 @@
 
       color: #000305;
       font-family: 'Ubuntu', 'Ubuntu Mono', 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
+      font-size:100%
     }
 
     div {
@@ -58,7 +59,6 @@
     }
 
     svg text {
-      font-size:30px;
       fill: brown;
     }
   </style>
@@ -128,25 +128,22 @@
     const textPath = document.createElementNS('http://www.w3.org/2000/svg', 'textPath');
     textPath.setAttributeNS(null, 'startOffset', '0%');
     textPath.setAttributeNS(null, 'href', '#svgpath');
-  textPath.textContent = "envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope!";
+  textPath.textContent = "envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope envelope!";
     textNode.appendChild(textPath);
     
     const animateLTR = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
     animateLTR.setAttributeNS(null, 'id', 'animateLTR');
     animateLTR.setAttributeNS(null, 'attributeName', 'startOffset');
-    animateLTR.setAttributeNS(null, 'from', '-5%');
-    animateLTR.setAttributeNS(null, 'to', '105%');
     animateLTR.setAttributeNS(null, 'begin', '0s; animateRTL.end');
     animateLTR.setAttributeNS(null, 'fill', 'freeze');
 
     const animateRTL = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
     animateRTL.setAttributeNS(null, 'id', 'animateRTL');
     animateRTL.setAttributeNS(null, 'attributeName', 'startOffset');
-    animateRTL.setAttributeNS(null, 'from', '105%');
-    animateRTL.setAttributeNS(null, 'to', '-5%');
     animateRTL.setAttributeNS(null, 'begin', 'animateLTR.end');
     animateRTL.setAttributeNS(null, 'fill', 'freeze');
-    updateSVG("M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z");
+    /* envelope icon by Amelia from https://thenounproject.com/icon/envelope-1526185/ under CC-BY-3.0 */
+    updateSVG("M82,20.3H18a13,13,0,0,0-13,13V66.7a13,13,0,0,0,13,13H82a13,13,0,0,0,13-13V33.3A13,13,0,0,0,82,20.3Zm-2.2,8L52.1,45.5a4,4,0,0,1-4.2,0L20.2,28.3ZM87,66.7a5,5,0,0,1-5,5H18a5,5,0,0,1-5-5V33.3h0L43.7,52.3a11.9,11.9,0,0,0,12.6,0L87,33.2h0Z");
     textPath.appendChild(animateLTR);
     textPath.appendChild(animateRTL);
     
@@ -155,6 +152,10 @@
     
     function updateValue(e) {
       textPath.textContent = (e.target.value);
+      updateAnim(
+        (window.getComputedStyle(textPath, null).getPropertyValue('font-size').slice(0,-2))
+        * (100/(window.screen.width))
+      );
       textPath.appendChild(animateLTR);
       textPath.appendChild(animateRTL);
     };
@@ -166,15 +167,29 @@
       }
     );
 
+    function updateAnim (_font_size) {
+      let _dur = svgPath.getTotalLength() / ( 50 * ( _font_size ) );
+      animateLTR.setAttributeNS(null, 'dur', _dur);
+      animateRTL.setAttributeNS(null, 'dur', _dur);
+      let _offset = (
+        ((( svgPath.getTotalLength() + textPath.textContent.length )
+          / svgPath.getTotalLength() ) * 100 ) - 100
+          - ( textPath.textContent.length * _font_size / 100)
+        ) * .96;
+      animateLTR.setAttributeNS(null, 'from', 0 - _offset + "%");
+      animateLTR.setAttributeNS(null, 'to', 100 + _offset + "%");
+      animateRTL.setAttributeNS(null, 'from', 100 + _offset + "%");
+      animateRTL.setAttributeNS(null, 'to', 0 - _offset + "%");
+    }
+
     function updateSVG(_d) {
       svgPath.setAttributeNS(null, 'd', _d);
       let _BB = svgPath.getBBox();
       svgNode.setAttributeNS(null, 'viewBox',
         _BB.x + " " + _BB.y + " " + _BB.width + " " + _BB.height);
-      moving_text.style["font-size"] = _BB.width / _BB.height + "em";
-      let _dur = svgPath.getTotalLength() / ( 25 * ( _BB.width / _BB.height ) );
-      animateLTR.setAttributeNS(null, 'dur', _dur);
-      animateRTL.setAttributeNS(null, 'dur', _dur);
+      let _font_size = ( ( ( _BB.width - _BB.x ) / window.screen.width ) * 4.5 );
+      targetDiv.style["font-size"] = _font_size + "vw";
+      updateAnim(_font_size);
     };
 
     var rainbow_input = document.getElementById('the_rainbow');