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

@callmeMisha · Регистрация: 06.11.2014

Author24 — интернет-сервис помощи студентам

В общем вот:
https://codepen.io/Black_Fire/pen/ZyygxQ

HTML5

<section class="about" id="aboutme">
    <div class="about-wrapper">
      <div class="gradient">
      </div>
      <div class="about-inner">
        <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. </p>
        <p>Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Эта парадигматическая страна, в которой жаренные члены предложения залетают прямо в рот. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни. </p>
      </div>
    </div>
  </section>

CSS

.about {
    height: 500px;
    background-color: rgb(21, 39, 98);
    color: #fff8e1
}
.about-wrapper {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    position: relative;
    width: 100%
}
.about-inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 70%;
    height: 500px;
    overflow: hidden;
    z-index: 99
}
.about-inner p {
    margin: 5px 0;
    font-size: 20px;
    font-weight: 200;
    color: black;
    letter-spacing: 1px;
    line-height: 30px;
    text-indent: 25px;
    text-align: justify;
}

и вот:
http://dbmast.ru/effekt-pechat... shhyu-css3

Как сделать чтобы текст, который в кодпэне, с таким же эффектом появлялся и при этом сохранилась его структура, я привел всю разметку блока, чтобы было видно как должно быть в итоге. Текст нужно чтобы по предложениям печатался, адекватно переносился при этом на новую строку, и там где нужно, начался с нового абзацев. В общем всё как в редакторе.
Помогите, плз. Знаю, что можно плагином typed.js, но может можно и на css сделать, что-то у меня не выходит.

	23.06.2017, 10:25

Опции темы