Хедер

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

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

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



Мотоцикл 1 Мотоцикл 2 Мотоцикл 3 Мотоцикл 4

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

Для создания подобного эффекта, в обучающем курсе рекомендовалось использовать версию ядра: 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.   Иначе - верхние буквы частично перекрываются нижним рядом.

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

* * *

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

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

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

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

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

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

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

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

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

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


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


* * *

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

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

Футер

Все права защищены. Copyright © 2009 - 2017 Коротеев Владимир.

В jQuery

Protected by Copyscape Duplicate Content Check
Яндекс.Метрика
Рейтинг@Mail.ru