Печатающийся текст — как сделать эффект на css

Опубликовано: 28.03.2021 в категории: HTML/CSS

Эффект печатающийся текст вы вероятно не раз видели на различных ресурсах. Это когда вы открываете страницу и видите как какой-то текст сам печатается на ней. Этот эффект часто используют в качестве рекламы. И действительно, очень эффективно, посетителю становится интересно, что-же там ему напечатают)).

Ну вот например как здесь:

Cейчас я расскажу вам о чем-то….

А делается печатающийся текст очень просто на чистом css не надо прописывать ни каких JS-скриптов.

И так, на странице вставляете код html:

<p class="text-type">Cейчас я расскажу вам о чем-то....</p>

А в файле css прописываете стили для вашего класса text-type:

.text-type {
width: 300px;
color: red;
font-size: 22px;
font-family: 'Marck Script', cursive;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 15s steps(50, end);
animation: type 15s steps(50, end);
}
@keyframes type{
from { width: 0; }
}
@-webkit-keyframes type{
from { width: 0; }
}

Есть некоторые нюансы. Не пишите слишком длинный текст, чтобы он не выходил за рамки дисплея. Я указал ширину 300px, это для того, чтобы ваш текст корректно отобразился на мобильной версии. Может есть вариант как-то сделать перенос строки эффекта печатающийся текст, но я пока не знаю (тоже многому только учусь), вариант <br/> не проходит, начинает печатать все перенесенные строки одновременно, хотя в некоторых ситуациях это может пригодиться.

На этом все, читайте так-же Как сделать бегущую строку в html

бесплатная накрутка подписчиков вконтакте

Самое читаемое:

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.

Заявка на бесплатную консультацию

Для бесплатной консультации укажите свое имя и номер телефона в форме ниже. Я перезвоню Вам и отвечу на все вопросы.

    Даю свое согласие на обработку персональных данных.

    ×
    Заказать сайт

    Чтобы заказать сайт заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, приму Ваш заказ и назову его ориентировочную стоимость.

      Даю свое согласие на обработку персональных данных.

      ×
      Заказать сайт по акции "Все включено"

      Для заказа сайта по акции «Все включено» заполните форму ниже. Я перезвоню Вам, отвечу на все вопросы, и приму Ваш заказ.

        Даю свое согласие на обработку персональных данных.

        ×
        Заказ услуги

        Для заказа услуги заполните форму ниже. Я перезвоню Вам, чтобы уточнить подробности, оговорить сроки и стоимость услуги.

          Даю свое согласие на обработку персональных данных.

          ×