new typing thingy

1 month ago · 141a5c02fc
commit 141a5c02fc
4 changed files with 136 additions and 0 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/index.html
+++ b/index.html
@ -0,0 +1,11 @@
+<html>
+	<head>
+		<link href="./style.css" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+		<h1>do you ever dream about work?</h1>
+		<p id="current" class="visible"  style='font-wariation-settings: "wdth" 50, "XTRA" 400, "XOPQ" 175;' tabindex="1">
+	</p>
+	</body>
+		<script src="./script.js"></script>
+</html>
--- a/script.js
+++ 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 += "<span id='"+i+"' class='visible' style='"+fontstring+"'>"+txt.charAt(i)+"</span>";
+    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();
+
--- a/style.css
+++ 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; 
+}