Сделай сайт

Cоздание сайта под ключ. Доработка сайтов, настройка сайтов.

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

Опубликовано: 28.03.2021 в категории: Сайтострой

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

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

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 не будет опубликован.