new typing thingy
commit
141a5c02fc
@ -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>
|
||||||
@ -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();
|
||||||
|
|
||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue