Last active
September 19, 2021 18:13
-
-
Save kirkegaard/3541a24810d8572c28dcd8b1e34bc11f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Typeout</title> | |
<style> | |
body, html { | |
margin: 0; | |
padding: 0px; | |
height: 100%; | |
background: rgb(23,1,45); | |
background: linear-gradient(180deg, rgba(23,1,45,1) 0%, rgba(45,1,36,1) 100%); | |
} | |
.container { | |
height: 100%; | |
max-width: 50%; | |
display: flex; | |
align-items: flex-end; | |
} | |
#typeout { | |
font-family: "arial black"; | |
font-size: 60px; | |
color: #fff; | |
} | |
#typeout #content { | |
background: -webkit-linear-gradient(45deg, rgba(23,1,45,0), #00ff95 80%); | |
-webkit-background-clip: text; | |
-webkit-text-fill-color: transparent; | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div id="typeout"> | |
<span id="content"></span><span id="cursor">_</span> | |
</div> | |
</div> | |
<script> | |
const text = "This is a typeout function. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ullam, magnam molestias et ratione omnis maiores commodi aut rem hic voluptatum." | |
const elm = document.querySelector('#typeout #content'); | |
const cursor = document.querySelector('#typeout #cursor'); | |
cursor.style.opacity = 1; | |
setInterval(() => { | |
cursor.style.opacity = cursor.style.opacity == 1 ? 0 : 1; | |
}, 500); | |
const typeout = (string, element) => { | |
if (!string) return false; | |
const characters = [...string]; | |
element.innerHTML += characters.slice(0, 1); | |
const minimum = 60; | |
const maximum = 175; | |
const delay = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; | |
setTimeout(() => typeout(characters.splice(1).join(""), element), delay); | |
}; | |
typeout(text, elm); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment