Как создать эффект пишущей машинки на CSS для вашего веб-сайта?

эффект пишущей машинки на CSS для вашего веб-сайта Изучение

В этой статье вы узнаете, как сделать текст вашего веб-сайта динамичным и более интересным, используя эффекты пишущей машинки на чистом CSS.

Эффект пишущей машинки заключается в том, что текст раскрывается постепенно, как будто он печатается на ваших глазах.

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

Эффект пишущей машинки создать легко

Его легко создать, и все, что вам понадобится для понимания этого урока, — это базовые знания CSS и анимации CSS.

Вот как будет работать эффект пишущей машинки:

  • Анимация пишущей машинки покажет наш текстовый элемент, изменив его ширину от 0 до 100%, шаг за шагом, с помощью steps()функции CSS.
  • Анимация мигания будет анимировать курсор, который «печатает» текст.

Создание веб-страницы для нашего эффекта набора текста

Давайте сначала создадим веб-страницу для демонстрации нашей пишущей машинки. Он будет включать

контейнер для текста нашей пишущей машинки с классом typed-out:

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
  </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

Стилизация контейнера для текста пишущей машинки

Теперь, когда у нас есть макет веб-страницы, давайте стилизуем ее

с помощью «типизированного» класса:

.typed-out {
  overflow: hidden;
  border-right: .15em solid orange;
  font-size: 1.6rem;
  width: ;
}

Обратите внимание, что для того, чтобы эффект пишущей машинки работал, мы добавили следующее:

  • «overflow: hidden;«и a «width: 0;», чтобы убедиться, что текстовое содержимое не отображается до тех пор, пока не начнется эффект набора текста.
  • «border-right:.15em solid orange;», чтобы создать курсор пишущей машинки.

Перед созданием эффекта набора текста, чтобы остановить курсор на последней букве typed-outэлемента после того, как он был полностью напечатан, как на пишущей машинке (или на самом деле текстовый процессор), мы создадим контейнер для typed-outэлемента и добавить display: inline-block;:

.container {
  display: inline-block;
}

Создание анимации раскрытия текста

Анимация пишущей машинки будет создавать эффект текста внутри печатаемого typed-outэлемента, буква за буквой. Воспользуемся @keyframesправилом анимации CSS:

@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Как видите, вся эта анимация меняет ширину элемента от 0 до 100%.

Теперь мы включим эту анимацию в наш typed-outкласс и установим направление ее анимации, forwardsчтобы убедиться, что текстовый элемент не вернется к нему width: 0после завершения анимации:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: ;
    animation: typing 1s forwards;
}

Наш текстовый элемент просто откроется одним плавным шагом слева направо:

body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
.container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: 
    typing 1s forwards;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Добавление шагов для достижения эффекта пишущей машинки

Пока что наш текст раскрывается, но плавно, не раскрывая текст по буквам. Это начало, но, очевидно, это не то, как выглядит эффект пишущей машинки.

Читайте также:  Руководство по аутсорсингу разработки программного обеспечения

Чтобы эта анимация отображала наш текстовый элемент буква за буквой или поэтапно, как на пишущей машинке, нам нужно разделить typingанимацию, включенную typed-outклассом, на шаги, чтобы она выглядела так, как будто она печатается. Здесь на steps()помощь приходит функция CSS:

.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  font-size: 1.6rem;
  width: ;
  animation: 
    typing 1s steps(20, end) forwards;
}

Как видите, мы разделили typingанимацию на 20 шагов с помощью steps()функции CSS. Вот что мы видим сейчас:

Вот наш полный код:

<html>
  <head>
    <title>Typewriter effect</title>
  </head>
  <style>body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
      display: inline-block;
    }
    .typed-out{
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      animation: 
      typing 1s steps(20, end) forwards;
      font-size: 1.6rem;
      width: ;
    }
    @keyframes typing {
      from { width:  }
      to { width: 100% }
    }</style>
<body>
<h1>I'm Matt, I'm a</h1>
<div class="container">
  <div class="typed-out">Web Developer</div>
</div>
</body>
</html>

Регулировка шагов для более длительного эффекта набора текста

Чтобы настроить более длинные фрагменты текста, вам нужно увеличить шаги и продолжительность анимации набора текста:

body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
.container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: typing 2.5s steps(50, end) forwards;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Регулировка шагов для более короткого эффекта набора текста

А чтобы настроить более короткие фрагменты текста, вам нужно уменьшить шаги и продолжительность анимации набора текста:

body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
.container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: typing 0.4s steps(8, end) forwards;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}

Создание и стилизация анимации мигающего курсора

Очевидно, что у оригинальных механических пишущих машинок не было мигающего курсора, но стало традицией добавлять его, чтобы имитировать более современный эффект мигающего курсора компьютера / текстового процессора. Анимация мигающего курсора помогает выделить набранный текст на фоне статических текстовых элементов.

Чтобы добавить анимацию мигающего курсора к нашей анимации пишущей машинки, мы сначала создадим blinkанимацию:

@keyframes blink {
  from { border-color: transparent }
  to { border-color: orange; }
}

Внутри нашей веб-страницы эта анимация изменит цвет границы typed-outэлемента, который используется в качестве курсора для эффекта пишущей машинки, с прозрачного на оранжевый.

Мы включим эту анимацию в typed-outправила класса и установим его свойство направления анимации, infiniteчтобы курсор исчезал и появлялся снова и снова.8s:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: ;
    animation: 
      typing 1s steps(20, end) forwards,
      blink .8s infinite;
}
body{
  background: navajowhite;
  background-size: cover;
  font-family: 'Trebuchet MS', sans-serif; 
}
.container{
  display: inline-block;
}
.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  animation: typing 1s steps(20, end) forwards, blinking .8s infinite;
  font-size: 1.6rem;
  width: ;
}
@keyframes typing {
  from { width:  }
  to { width: 100% }
}
@keyframes blinking {
  from { border-color: transparent }
  to { border-color: orange; }
}

Настройка кода для эффекта мигающего набора текста

Мы можем сделать курсор тоньше или толще, настроив его border-right:.15em solid orange;свойство, или вы можете изменить цвет курсора, присвоить ему радиус границы, настроить частоту его эффекта мигания и многое другое.

body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
        display: inline-block;
    }
    .typed-out{
        overflow: hidden;
        border-right: .30em solid orange;
        border-radius: 4px;
        white-space: nowrap;
        animation: 
          typing 1s steps(20, end) forwards,
          blinking 1.2s infinite;
        font-size: 1.6rem;
        width: ;
    }
    @keyframes typing {
      from { width:  }
      to { width: 100% }
    }
    @keyframes blinking {
      from { border-color: transparent }
      to { border-color: green; }
    }

Вы можете поэкспериментировать с этими свойствами в демонстрации CodePen и посмотреть, что еще вы можете придумать!

Читайте также:  Лучшие тренажеры слепой печати в Linux

Объединение элементов анимации текста пишущей машинки

Теперь, когда вы знаете, как создать эффект пишущей машинки в CSS, мне пора продемонстрировать некоторые практические и актуальные варианты использования этого эффекта печати.

Эффект набора портфолио

Вот пример личного портфолио. Эффекты пишущей машинки могут выделить ваше веб-резюме / личный веб-сайт и сделать его более привлекательным.

Эффекты пишущей машинки могут выделить ваше веб-резюме

Вы можете поиграть с этой демонстрацией портфолио на CodePen.

Эффект ввода API

Вот пример целевой страницы API.

пример целевой страницы API

Вы можете поиграть с этой демонстрацией API на CodePen.

Вероятно, что в какой-то момент вашего пути разработки вы натолкнулись на целевую страницу поставщика API и увидели такой блок кода, демонстрирующий реализацию их API. Я лично считаю, что это действительно практичная и актуальная реализация эффекта пишущей машинки, и считаю, что она выглядит более привлекательной и привлекательной, чем статический кусок кода.

Эффект набора целевой страницы продукта

Вот пример целевой страницы SaaS / продукта.

Вы можете поиграть с этой демонстрацией страницы продукта

Вы можете поиграть с этой демонстрацией страницы продукта SaaS на CodePen.

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

Заключение

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

Хотя, возможно, стоит закончить мягким предупреждением. Этот метод лучше всего использовать с небольшими частями некритического текста, просто чтобы создать немного дополнительного удовольствия. Но будьте осторожны, чтобы не полагаться на него слишком сильно, поскольку использование подобной CSS-анимации имеет некоторые ограничения. Обязательно протестируйте текст на пишущей машинке на разных устройствах и с разными размерами области просмотра, так как результаты могут отличаться в зависимости от платформы. Также позаботьтесь о конечных пользователях, которые полагаются на вспомогательные технологии, и в идеале запустите несколько тестов на удобство использования, чтобы убедиться, что вы не усложняете жизнь своим пользователям. То, что вы можете что-то делать с чистым CSS, не обязательно означает, что вы должнысделай это. Если эффект пишущей машинки важен для вас и вы хотите использовать его для более важного контента, возможно, хотя бы посмотрите на решения JavaScript.

В любом случае, я надеюсь, что вам понравилась эта статья, и что она заставила вас задуматься о других интересных вещах, которые вы можете делать с помощью CSS-анимации, чтобы добавить нотки интереса и удовольствия на свои веб-страницы.

Оцените статью
bestprogrammer.ru
Добавить комментарий