Анимация текста (заголовка) на landing page

Всем привет. Рад наконец вернуться и поделиться с вами интересным материалом. Сегодня речь пойдет о таком эффекте, как анимация текста. А точнее анимация заголовка на landing page.

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

Сам по себе эффект не новый, но в 15 - 16 годах использовался, как по мне, довольно редко. Давайте попробуем создать подобный эффект и ниже я приложу несколько интересных вариантов на Codepen.

Простой эффект анимации текста

Для тех, кто еще не понял, что мы делаем, загляните в демку или посмотрите коротенькое видео. Если заинтересовало, читайте дальше.

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

<header class="site-header__wrapper">   
  <div class="site-header">       
    <h1 class="site-header__title">Создание продающих landing page</h1>
    <span id="typed-text"></span>
  </div>
</header>

Обратите внимание на span с id="typed-text" именно сюда будет подставляться наш анимированный текст.

Теперь добавим немного стилей.

Они не нужны вам, если у вас другая структура. Стили для примера и не влияют на анимацию.

body{
    font: 16px 'Roboto','Comforta', sans-serif;
}

.site-header__wrapper {
    background: #232f3b;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 15px;
    justify-content: center;
}

.site-header{
    width: 100%;
    max-width: 600px;
    min-height: 200px;
    text-align: center;
    color: #eee;
}

.site-header__title {
    font-size: 2rem;
}

.site-header__description {
    font-size: 1.125rem;
}

Теперь подключим плагин typed.js, который и поможет нам осуществить задуманное. Сделаем это, как обычно, перед закрывающимся тегом body:

<script src="./js/typed.min.js"></script>

Плагин подключен, но этого мало, нужно его инициализировать. Давайте сделаем это, а заодно добавим несколько настроек. После подключения плагина пишем:

<script>
  var typed2 = new Typed('#typed-text', {
    strings: ['Адаптивный дизайн', 'Домен и хостинг в подарок', 'Бесплатная настройка контекстной рекламы'],
    typeSpeed: 30,
    backSpeed: 20,
    loop: true
  });
</script>

Давайте разберемся с настройками.

var typed2 = new Typed('#typed-text', {

Создаем новый объект и указываем id, к которому привязываемся (наш span).

strings: ['Адаптивный дизайн', 'Домен и хостинг в подарок', 'Бесплатная настройка контекстной рекламы'],

Строка, в которую передаем текст, который будет анимироваться.

• typeSpeed: 30 - скорость набора,
• backSpeed: 20 - скорость стирания текста,
• loop: true - зацикливать или нет анимацию.

Это не все настройки. Подробнее можно ознакомится, перейдя по ссылке выше.

В принципе это - все. Если повторяли за мной, то у вас должно получиться так:

Посмотреть пример

Еще несколько примеров интересной анимации текста

А вот и обещанные несколько ссылок с интересными эффектами анимации текста:

• codepen.io/yoannhel/pen/sJpDj
• codepen.io/siamon123/pen/xGWQXJ
• codepen.io/ajayadav09/pen/KwjOBP"
• codepen.io/slandar/pen/mWQPoe
• codepen.io/egrucza/pen/LkdPZP
• codepen.io/ameyraut/pen/rimju

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