Анимация текстовой машинки только с HTML, CSS и JavaScript?

https://codepen.io/HARSH_VATS/pen/oNbExwE

Видел анимацию выше? Это круто. Верно? Хотя вы можете напрямую использовать эту анимацию на своем веб -сайте, просто скопируя код, но если вы хотите узнать, как я это сделал, вы, вероятно, должны прочитать эту статью до конца. HTML

Div с идентификатором «коробка» будет содержать нашу анимацию. Две пролеты необходимы для текста и каррата соответственно. Внутри второй дивинг, который содержит другой промежуток. Это сделано, чтобы начать анимацию подчеркивания с правой стороны, а не слева. CSS

    body {
        margin: 0;
        background: black;
        color: cyan;
         }

Это удаляет по умолчанию 8PX -краю тела и вносит некоторые изменения цвета.

    #box {
        text-align: center;
        font-size: 32px;
        display: inline-block;
    }

Дисплей устанавливается на линейный блок, так что DIV не покрывает всю ширину страницы. Следовательно, подчеркивание начинается с последнего слова, а не с правой стены вашего устройства.

    @keyframes letter {
      0% {
        font-size: 20px;
      }
      100% {
        font-size: 30px;
      }
    }

Эта анимация вносит изменения размер шрифта последнего слова. Итак, давайте использовать эту анимацию в тексте.

    #last-letter {
        animation: letter 0.5s cubic-bezier(0.08, 0.6,0.56,1.4);
    }

Вы можете подумать, какой элемент имеет идентификатор как «последнее буква». Не волнуйся! Я назначу его с помощью JavaScript. Но сначала закончить носитель. Для этого я сделал мигающий анимацию. Посмотри.

    @keyframes blink {
      0% { opacity: 0.0; }
      50% { opacity: 1.0; }
      100% { opacity: 0.0; }
    }
    #carrat {
        border: 1px solid cyan;
        opacity: 1.0;
        animation: blink 0.8s linear infinite;
        font-size: 31px;
        font-weight: 100;
        position: relative;
        top: -3px;
        right: -2px;
    }

Мигальная анимация проста. Это просто изменяет непрозрачность с 0 до 1 на 0. Анимация должна повторяться, поэтому я использовал «бесконечный» в анимации. Carrat – это всего лишь пролет с некоторой границей и шириной 1PX. Первоначальная непрозрачность установлена на 1, которая, кстати, не необходима. Положение установлено относительно, чтобы вы могли изменить его положение и заставить ее коснуться подчеркивания.

    #underline {
        height: 1px;
        background: cyan;
        margin-top: -4px;
        width: 0;
        float: right;
        transition: 2s;
    }

Подчеркивание – это просто Div с некоторым цветом фона и высотой 1PX. Начальная ширина составляет 0, и мы изменим ширину на 100% в конце анимации с помощью JS. Право Float заставляет анимацию начинаться справа. Переход – это время для анимации.

JavaScript

вар; вар; var arr = []; вар; var.length; setInterval (() => { if (i $ {arr [arr.length – 1]} ; } if (i) { ; ; } i ++; }, time_per_word);

Слово – это то, что мы хотим оживить. Мы будем использовать SetInterval с Time_per_word для нашей анимации. Это изменит Innerhtml Span с идентификатором «текст» в некотором обычном интервале времени. Мы будем печатать каждую букву, как это, кроме последней. Каждое письмо становится последней буквой для этого, начиная с первой буквы. Остановите мигающую анимацию, если «я» становится равной «длины» и установите ширину на 100%. Это все сейчас. Я надеюсь, что вы поняли, что пыталось вас доставить. Я да, тогда не забудьте хлопать. Если у вас есть какие -либо сомнения, не стесняйтесь спрашивать в комментариях.

Оригинал: “https://dev.to/harshvats2000/how-i-made-my-own-text-animation-with-just-html-css-and-javascript-37a4”