Эффект набора текста – это простая, но стильная анимация, используемая многими блоггерами и веб -разработчиками, чтобы представиться элегантно.
Этот урок покажет вам, как создать эффект набора типирования с помощью простых CSS и JS (без библиотек).
Начнем с создания держателя текста P с классом typetext Анкет
Мы добавляем мигающий курсор после нашего абзаца с анимацией CSS:
.typeText::after {
content: "|";
animation: blink 1s infinite;
}
@keyframes blink {
0%, 100% {opacity: 1;}
50% {opacity: 0;}
}
Псевдо класс :: После собирается добавить курсор | И заставьте его мигать с миганием анимации KeyFrames.
Если вы не знакомы с анимациями, я сделал представление в CSS Animations здесь.
Вот все JS к эффекту набора текста:
var typeText = document.querySelector(".typeText")
var textToBeTyped = "a software engineer"
var index = 0, isAdding = true
function playAnim() {
setTimeout(function () {
// set the text of typeText to a substring of
// the textToBeTyped using index.
typeText.innerText = textToBeTyped.slice(0, index)
if (isAdding) {
// adding text
if (index > textToBeTyped.length) {
// no more text to add
isAdding = false
//break: wait 2s before playing again
setTimeout( function () {
playAnim()
}, 2000)
return
} else {
// increment index by 1
index++
}
} else {
// removing text
if (index === 0) {
// no more text to remove
isAdding = true
} else {
// decrement index by 1
index--
}
}
// call itself
playAnim()
}, 120)
}
// start animation
playAnim()
Playanim () Функция вызывает себя неоднократно, используя settimeout с задержкой 120 мс.
С помощью метода строки Slice (0, Index) Мы устанавливаем текст typetext к подстроению TextTobeTyped Анкет
typeText.innerText = textToBeTyped.slice(0, index)
Индекс начинается с 0 и приращением к 1, когда мы добавляем и уменьшаем на 1, когда мы удаляемся.
Isadding это логический, который используется для проверки, добавляем ли мы или удаляем.
Когда Индекс больше длины TexttobeTyped , мы устанавливаем Isadding ложно, чтобы начать удаление. И когда Индекс равна 0, мы установили Isadding верно, чтобы начать добавлять снова.
После того, как он закончил добавление, Settimeout с задержкой на 2000 мс создаст перерыв для людей, чтобы прочитать текст, прежде чем он снова будет удален.
if (index > textToBeTyped.length) {
// no more text to add
isAdding = false
//break: wait 2s before playing again
setTimeout( function () {
playAnim()
}, 2000)
return
}
И мы получаем:
Вот и все! Теперь вы должны быть в состоянии сделать свой собственный эффект печати.
Я пытался сделать это подходящим для начинающих Но я думаю, что мои объяснения не были такими хорошими 😅. Если у вас есть вопросы, пожалуйста, оставьте комментарий или поразите меня в моих социальных сетях 😁.
За пределами оснований
Анимация курсора может быть сделана более реалистичной, добавив встроенную анимационную функцию Степень Наша мигальная анимация как это:
.typeText::after {
content: "|";
/* animation: blink 1s infinite; */
animation: blink 1s step-end infinite;
}
шаги являются недавним дополнением к CSS. Они нарушают поток анимации, играя в нее в прыжках. Единственная разница между двумя анимациями ниже – добавление шагов во 2 -й Div.
Мы можем увеличить скорость удаления, изменяя задержку Settimeout с логическим Isadding и такой тройной оператор, как это:
function playAnim() {
setTimeout(function () {
// ...
}, isAdding ? 120 : 60)
Тройной оператор означает, если он добавляет, установите задержку на 120 мс. Если он удаляет, установите задержку на 60 мс.
И вместо того, чтобы вводить одну строку, мы можем выбрать массив строки TexttobeTypedArr быть напечатанным по очереди. И TexttobeTypedIndex переменная, чтобы отслеживать текущий текстовый индекс в массиве. TextToBeTypEdIndex будет обновляться каждый раз после того, как мы закончим удаление предыдущего текста.
var typeText = document.querySelector(".typeText")
// var textToBeTyped = "a software engineer"
var textToBeTypedArr = ["a software engineer", "a warlord", "a king", "a peasant"]
var index = 0, isAdding = true, textToBeTypedIndex = 0
function playAnim() {
setTimeout(function () {
// set the text of typeText to a substring of the text to be typed using index.
typeText.innerText = textToBeTypedArr[textToBeTypedIndex].slice(0, index)
if (isAdding) {
// adding text
if (index > textToBeTypedArr[textToBeTypedIndex].length) {
//...
} else {
//...
}
} else {
// removing text
if (index === 0) {
//...
//switch to next text in text array
textToBeTypedIndex = (textToBeTypedIndex + 1) % textToBeTypedArr.length
} else {
//...
}
}
// calls itself
playAnim()
}, isAdding ? 120 : 60)
}
// start animation
playAnim()
И для префекционистов, которым не нравится курсор, мигающий, когда текст добавляется/удаляется, мы можем переключить анимацию Blink, удалив анимацию из:: после и добавив ее только в JS с Showanim учебный класс:
.typeText::after {
content: "|";
/* animation: blink 1s step-end infinite; */
animation: none;
}
.showAnim.typeText::after {
animation: blink 1s step-end infinite;
}
И переключать Showanim класс в JS:
function playAnim() {
//...
if (index > textToBeTyped.length) {
// no more text to add
isAdding = false
//break: wait 2s before playing again
// play cursor blink animation
typeText.classList.add("showAnim")
setTimeout(function () {
// remove cursor blink animation
typeText.classList.remove("showAnim")
playAnim()
}, 2000)
return
//...
}
Конец!
Оригинал: “https://dev.to/ljcdev/simple-typing-effect-pure-js-4p5m”