Jump to content
  • 0
Sign in to follow this  
Александр Бузмаков

Как сделать эффект печатающегося текста на сайте Muse?

Question

Эффект печатающегося текста (как будто его набивает невидимая рука) сделать можно запросто на чистом css, без применения скриптов.

Для этого, в <head> нашего Muse-сайта, нужно добавить следующий код:

<style>
#u298-4
{
    width: 25em;
    white-space:nowrap;
    overflow:hidden;
    -webkit-animation: type 4s steps(40, end);
    animation: type 4s steps(40, end);
}

@keyframes type{
    from { width: 0; }
}

@-webkit-keyframes type{
    from { width: 0; }
}
</style>

Идентификатор "#u298-4" замените на ID вашего текстового блока.

Параметры эффекта можно изменить путем увеличения/уменьшения числовых значений.

Это очень просто. Испытайте!

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0
Vadim    50

Круто спасибо!

У меня почему то, когда текст на всю ширину страницы, он печатается а потом останавливается на 600px от начала.

Убрал width: 25em; он начал допечатываться а потом ехать вправо. Наверно нужно задавать точную ширину блока с текстом.

Едет вправо, потому что текст центрирован по центру блока, если сделать блок точно по ширине текста и отцентрировать по левому краю, все ок.

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
  • 0

А у меня просто текст сдвигается в правую сторону. Смотр. в хроме. Как то можно зациклить такой эффект? Точнее, вот щас  замедлил анимацию, увидел что эффект печатания хотя бы есть. Но все равно вправо уезжает после анимации.

Share this post


Link to post
  • 0
Sashkadev    0

Подскажите виджет, что реализовать эффект печатающей машинки как тут sibearia.xyz

Share this post


Link to post
Sign in to follow this  

×
×
  • Create New...