<h1 class="typing-text" ></h1>
html, body {
margin: 0;
}
body {
font-family: sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #000;
color: #fff;
}
h1 {
margin: 0;
}
.typing-text::after {
content: "|";
animation: blink ease 1s infinite;
}
@keyframes blink {
0%, 100% {
opacity: 0;
} 50% {
opacity: 1;
}
}
// get the element
const text = document.querySelector('.typing-text');
// make a words array
const words = [
"НЕЙРОН",
"больше",
"чем просто платформа",
"сила",
"объединяющая миры"
];
// start typing effect
setTyper(text, words);
function setTyper(element, words) {
const LETTER_TYPE_DELAY = 75;
const WORD_STAY_DELAY = 2000;
const DIRECTION_FORWARDS = 0;
const DIRECTION_BACKWARDS = 1;
var direction = DIRECTION_FORWARDS;
var wordIndex = 0;
var letterIndex = 0;
var wordTypeInterval;
startTyping();
function startTyping() {
wordTypeInterval = setInterval(typeLetter, LETTER_TYPE_DELAY);
}
function typeLetter() {
const word = words[wordIndex];
if (direction == DIRECTION_FORWARDS) {
letterIndex++;
if (letterIndex == word.length) {
direction = DIRECTION_BACKWARDS;
clearInterval(wordTypeInterval);
setTimeout(startTyping, WORD_STAY_DELAY);
}
} else if (direction == DIRECTION_BACKWARDS) {
letterIndex--;
if (letterIndex == 0) {
nextWord();
}
}
const textToType = word.substring(0, letterIndex);
element.textContent = textToType;
}
function nextWord() {
letterIndex = 0;
direction = DIRECTION_FORWARDS;
wordIndex++;
if (wordIndex == words.length) {
wordIndex = 0;
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.