jQuery Постепенное появление текста

К этой странице тестового сайта подключил, и испытываю интересный эффект использования jQuery для постепенного появления текста при загрузке страницы.

Результат работы управляющего скрипта и ядра jQuery видно ниже. Подробности под картинками мотоциклов.

Создание эффекта постепенного появления текста

Для создания подобного эффекта, в обучающем курсе рекомендовалось использовать версию ядра: jQuery v.1.12.4
Я использовал версию, уже подключённую к сайту: jQuery v1.10.1 Всё О.К! Работает!

Вообще-то, появляющиеся строки текста сами подстраиваются под выделенную им ширину блока примера, а его высота изначально зависит от размера спрятанного текста примера.
Поэтому, слишком большой кусок скрытого текста (пока он не появился) вызывает ощущение ПУСТОТЫ веб-страницы. Ведь она, ПУСТОТА, видна сразу!

Но это - мелочи! Можно было бы "повесить" какой-нибудь НЕ яркий фоновый рисунок на блок примера. Делать этого не стал, т.к. мне было важно только изучить и проверить принцип создания постепенного появления текста.

Принцип создания такого эффекта - смена (с помощью управляющего скрипта) свойства "opacity" с "0" до "1".
Подробнее об этом свойстве смотреть в конце страницы.

Управление размером, жирностью и цветом текста производится атрибутом "style" в HTML-коде этой страницы.

Сейчас установлено:

Ширина области вывода текста: 760px.
Обычное состояние: display:none (спрятан).
Стиль текста: italic (наклонный).
Размер текста: 30px.
Жирность текста: bold (жирный).
Цвет текста: sienna (шоколадный).

Фоновый цвет появляющегося текста можно изменить в общей таблице стилей CSS, в его собственных правилах.

Сейчас прописал:

Фоновый цвет: #AFEEEE (бирюзовый).

Управление скоростью появления текста - в написанном для этой страницы управляющем скрипте.

Сейчас установил:

Интервал появления текста: 120 ms (миллисекунды).

Обязательно! Убрать в общей таблице стилей рамку для блока с примером. Иначе все буквы будут её иметь! Так как блок примера получает её под действием управляющего скрипта, меняющего его стиль.

И сделать для него свойство "line-height" равным 45px. Иначе - верхние буквы частично перекрываются нижним рядом.

НО! Делать так (убирать рамку) нужно ТОЛЬКО для данной таблицы стилей, поскольку блок меняет свой стиль на один из уже ранее написанных в ней.

* * *

Перенос выводимых строк текста на НОВУЮ СТРОКУ

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

Как сделать так, чтобы буквы текста продолжали появляться, но уже с новой строки?

Весь текст разбивается скриптом на отдельные символы. И для переноса этих самых выводимых символов на новую строку, необходимо использовать какой-нибудь редкий символ (используемый редко). Важно! Чтобы он был НЕ СЛУЖЕБНЫМ!

В обучающем курсе рекомендовано применить символ "~" (добавлять его в текст, где нужен перенос, вместо тэга ).

И в самом управляющем коде нужно переделать строку: $this.html(string.replace(/./g, '$&'));

Вместо неё одной, нужно написать две такие строчки кода:
string = string.replace(/./g, '$&');
$this.html(string.replace(/~/g, ' '));

* Всё работает О.К!!! *

Prim* Для этой страницы применил 2-ой вариант кода (двухстрочный), хотя 1-ый вариант тоже работает, НО(!) однако никакие ТЭГИ в тексте примера НЕ СРАБАТЫВАЮТ!

Амперсанды (любые) работают ОТЛИЧНО!

* В показанном примере вывода текста, использовать СИМВОЛ ПЕРЕНОСА не стал, хотя МОГ БЫ ... ... *

* * *

Самый простой способ постепенного появления текста: "бегущая строка" можно посмотреть на странице сайта в HTML-разделе "Текстовые эффекты" (откроется в новом окне).

Подробно о видимости веб-элементов на странице сайта (текста в том числе), т.е. свойстве CSS "opacity" можно посмотреть в другом HTML-разделе: "Прозрачность элементов" (откроется в новом окне).