From 141a5c02fcd38b55b95b89e974cbe72602e4cf69 Mon Sep 17 00:00:00 2001 From: Stephen Date: Thu, 13 Jun 2024 20:50:16 +0200 Subject: [PATCH] new typing thingy --- .DS_Store | Bin 0 -> 6148 bytes index.html | 11 +++++++ script.js | 91 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 34 ++++++++++++++++++++ 4 files changed, 136 insertions(+) create mode 100644 .DS_Store create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..c2d07b174dffafb65181d880c7d7c20d24c88ed3 GIT binary patch literal 6148 zcmeHKyG{c^3>-s>08Pr2`vsBsgH03)YJMQfLkiMCihu;&b$kw=2;&DRmxDG1*pfZ_ z@SN|aIPU_G+4K4u7y%g474fE_Z@RDEv$I%H6nn-CCfMQ$4`_PXKQAcv68Ct-8XFw& zZ=2m}+3c3w*O!~pCm&`U0TvPUm`w zyc*a#Ivrw_`JAXMaYGTS&h=vHkm{H*6-WiT3Y`0Nr2YSf{>%NpOUhX)kP7@M1!OS4 zo6q=3(OY{Tr@gk&7xXV + + + + +

do you ever dream about work?

+

+

+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..6a927b6 --- /dev/null +++ b/script.js @@ -0,0 +1,91 @@ +document.addEventListener('keydown', updateChar); +document.addEventListener('keyup', stopChar); + +var i = 0; +var txt = ''; +var speed = 50; +var keyisdown = 0; +var newpercentage = 0; + +var tempwdth = 50; +var tempXTRA = 400; +var tempXOPQ = 60; + +var fontstring = 'font-variation-settings: "wdth" 50, "XTRA" 400, "XOPQ" 60;'; +//------- experiment with keydown keyup + +var timer; + +function updateChar(e) { +// console.log(e); + if(keyisdown == 0){typeWriter()}; + keyisdown = 1; + if(timer) return; + timer= setInterval(growLetter, 1); +} + +function stopChar() { + keyisdown = 0; + clearInterval(timer); + timer= null; + + tempwdth = 50; + tempXTRA = 400; + tempXOPQ = 60; +} + +//--------------the typewriter stuff + +function typeWriter() { + //clear the html initially for a text + if (i === 0) + document.getElementById("current").innerHTML = ''; + + if (i < txt.length) { + restoreText(); + document.getElementById("current").innerHTML += ""+txt.charAt(i)+""; + i++; + if(txt.charAt(i-1)==" "){typeWriter()}; + } + if(i==txt.length){ + clearText(); + i++; + setTimeout(newQuote, 4000); + } +} + +var quotes = [ + "I was at a festival or summer camp. I looked in the main room and saw loads of synths set up, they were going to play a gig. And my brother was going to play with them. I was so annoyed and upset that they didn't tell me.", + "I was a designer, a weapons designer. I made a drone for a friend but he used it for evil. A woman got hurt, we were eating jelly. When he died she would go in an orphanage, I would be put in the army. My stomach was going to explode. In the army I finished painting my red stencils, warning signs. " +] +//var quotes = ["test1.", "test2."] + +function newQuote() { + //set the typing text + txt = quotes[Math.floor(Math.random() * quotes.length)]; + + //reset the index + i = 0; +} + +function clearText(){ + document.getElementById('current').classList.add("disappear"); +} + +function restoreText(){ + document.getElementById('current').classList.remove("disappear"); +} + +function growLetter() { + targetwdth = 151; + targetXTRA = 603; + targetXOPQ = 175; + document.getElementById(i-1).style.fontVariationSettings = "\"wdth\" " + tempwdth + ", \"XTRA\" " + tempXTRA + ", \"XOPQ\" " + tempXOPQ; + + tempwdth++; + tempXTRA++; +// tempXOPQ++; +} + +newQuote(); + diff --git a/style.css b/style.css new file mode 100644 index 0000000..b3c6eab --- /dev/null +++ b/style.css @@ -0,0 +1,34 @@ + +body{ + font-family: 'Roboto Flex', 'MutatorMathTest', 'Amstelvar'; +/* font-variation-settings: "wdth" 50, "XTRA" 400, "XOPQ" 60; */ + /*font-variation-settings: "wdth" 151, "XTRA" 603, "XOPQ" 175: */ + width: 86vw; + margin: 8rem auto; + color: #00f; + background-color: #ada; +} +h1{ + font-family: monospace; + font-style: italic; + font-size: 1rem; + font-weight: 400; +} +#current{ + font-weight: 700; + font-size: 7rem; + text-transform: uppercase; + line-height: 1; + margin: 0; +} +.visible{ + visibility: visible; + opacity: 1; + /*transition: opacity 2s linear;*/ + transition: none, none; +} +.disappear { + visibility: hidden; + opacity: 0; + transition: visibility 0s 4s, opacity 4s linear; +}