From 3ea902a3702582434fb0cb40517124fc535cc1a0 Mon Sep 17 00:00:00 2001 From: james pannacciulli Date: Wed, 28 Jun 2023 12:49:43 -0400 Subject: replace envelope svg, better font size / animation length responsiveness --- html/index.html | 37 ++++++++++++++++++++++++++----------- 1 file 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; } @@ -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'); -- cgit v1.2.3