commit 141a5c02fcd38b55b95b89e974cbe72602e4cf69 Author: Stephen Date: Thu Jun 13 20:50:16 2024 +0200 new typing thingy diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..c2d07b1 Binary files /dev/null and b/.DS_Store differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..7b451d8 --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + +

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; +}