ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированный набор печати текста на CSS

Анимированный набор печати текста на CSS

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

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

Плюс она несет информационный поток, где можно прочесть, это не просто знаки печатает, а выстраивает логическую цепочку для чтение. Подобрал 3 варианта, где можно выбрать тот, который больше по своему эффекту подойдет. Есть чисто на стилистике CSS, также есть, где нужно подключать JS. Где остается прописать текст, который вы хотите показать, и он будет отображаться по буквам, как если бы вы печатали на старой пишущей машинке.

Первый вариант:

Эффект печатающегося текста с помощью CSS

Анимированный набор текста

HTML

Код

CSS

Код

#pingenuxation {
  width: 795px;
  padding: 25px;
  height: auto;
  font-family: sans-serif;
  font-size: 38px;
  margin: 25px auto;
  color: #f9f4f4;
  font-weight: bold;
  background: #050827;
}

Код

var string = "Интересные решения вебмастеру для создания качественного сайта.";
var str = string.split("");
var el = document.getElementById('pingenuxation');
(function animate() {
str.length > 0 ? el.innerHTML += str.shift() : clearTimeout(running);
var running = setTimeout(animate, 90);
})();

Также здесь задается скорость самостоятельно.

Демонстрация

Второй вариант:

Создание эффекта набора текста на CSS

HTML

Код

CSS

Код

.kuomated {
  width : 99%;
  text-align: center;
  height: 48px;
  line-height: 48px;
  font-size : 37px;
  position : absolute;
  top: 0;
  bottom : 0;
  margin : auto;
}

.kuomated .dsavumilopam {
  display : inline;
}

.kuomated .samilagtun {
  display: inline-block;
  height: 3px;
  width : 19px;
  background-color: #4e65dc;
  animation: blink .5s infinite linear;
}

@keyframes blink {
  0% {
  opacity : 1;
  }

  99% {
  opacity : 0;
  }

  100% {
  opacity: 1;
  }
}

Код

Один из многих моментов, где в JS, нужно писать текст, который изначально появляется.

Демонстрация

Третий вариант:

Создание эффекта набора текста с использованием CSS

Анимация шрифта CSS3

HTML

Код

<div class="bukennison">Анимированный шрифт при помощи CSS3</div>

CSS

Код

.bukennison {
  color: #2d2f33;
  font-family: "Helvetica", sans-serif;
  text-transform: uppercase;
  font-size: 35px;
  font-weight: bold;
  margin: 5px 0 0 5px;
  white-space: nowrap;
  overflow: hidden;
  width: 925px;
}

.bukennison {
  animation: type 4s steps(60, end);
  -webkit-animation: type 4s steps(60, end) infinite;
  -moz-animation: type 4s steps(60, end) infinite;
  o-animation: type 4s steps(60, end) infinite;
}

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

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

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

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

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

Демонстрация

PS - под каждый набор эффекта идет архив, который пронумерован, как в материале. При установке он не нужен, но идет как дополнение к основному материалу.

14 Декабря 2018 Загрузок: 1 Просмотров: 2636 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0