Вы когда-нибудь сталкивались с этим классным эффектом набора текста на разных веб-сайтах, где слова выглядят так, как будто их печатают? Если вы начинающий веб-разработчик, вам может быть интересно, как самостоятельно создать такую привлекательную анимацию. Что ж, это простой, но впечатляющий эффект, которого можно достичь, используя только HTML, CSS и jаvascript.
В этой анимации набора текста каждая буква слова появляется одна за другой, создавая эффект пишущей машинки. В конце слова также есть анимация мигающего курсора, чтобы сделать эффект более привлекательным. Чтобы узнать больше о том, как выглядит наша анимация ввода текста, вы можете посмотреть данное видео
Вы можете посмотреть видео демонстрацию, попробовать сверстать самому по видео или скачать архив с готовым кодом. Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.
В архиве находится:
- Исходные файлы HTML
- Исходные файлы CSS
- Исходные файлы jаvascript
- Иконки шрифтов
- Файлы библиотеки и плагинов
В этом сообщении в блоге я проведу вас по шагам создания этой анимации набора текста с использованием HTML, CSS и ванильного jаvascript. Это означает, что мы не полагаемся ни на какие внешние библиотеки jаvascript, такие как typed.js . Таким образом, вы получите глубокое понимание того, как создается этот тип анимации набора текста и как вы можете применить свои навыки к реальным веб-проектам.
HTML КОД:
<body>
<h1>Coding is <span></span></h1>
</body>CSS КОД:
body {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
background: #1D1E23;
}
h1 {
color: #fff;
font-size: 2rem;
font-weight: 600;
}
h1 span {
color: #BD53ED;
position: relative;
}
h1 span::before {
content: "";
height: 30px;
width: 2px;
position: absolute;
top: 50%;
right: -8px;
background: #BD53ED;
transform: translateY(-45%);
animation: blink 0.7s infinite;
}
h1 span.stop-blinking::before {
animation: none;
}
@keyframes blink {
50% { opacity: 0 }
}jаvascript КОД:
const dynamicText = document.querySelector("h1 span");
const words = ["Love", "like Art", "the Future", "Everything"];
// Variables to track the position and deletion status of the word
let wordIndex = 0;
let charIndex = 0;
let isDeleting = false;
const typeEffect = () => {
const currentWord = words[wordIndex];
const currentChar = currentWord.substring(0, charIndex);
dynamicText.textContent = currentChar;
dynamicText.classList.add("stop-blinking");
if (!isDeleting && charIndex < currentWord.length) {
// If condition is true, type the next character
charIndex++;
setTimeout(typeEffect, 200);
} else if (isDeleting && charIndex > 0) {
// If condition is true, remove the previous character
charIndex--;
setTimeout(typeEffect, 100);
} else {
// If word is deleted then switch to the next word
isDeleting = !isDeleting;
dynamicText.classList.remove("stop-blinking");
wordIndex = !isDeleting ? (wordIndex + 1) % words.length : wordIndex;
setTimeout(typeEffect, 1200);
}
}
typeEffect();
