Создаем тур по странице с подсказками на CSS3Иногда, при редизайне или открытии нового проекта, веб-мастеру необходимо ознакомить посетителя с нововведениями, при этом подчеркнув основные элементы и предоставить инструкцию по работе с ними. В сегодняшнем уроке мы рассмотрим как создать такой замечательный тур по странице с использованием «живых» подсказок.  Для работоспособности нам понадобится немного стилей css и несколько простых функций jquery. Подсказки будут происходить при нажатии на кнопку начала действия.

 

По умолчанию у нас будет отображаться три подсказки, они будут передвигаться к следующему фрагменту после нажатия на кнопку «Следующая», будет происходить плавная анимация. И так, давайте приступим.

Шаг 1. HTML

HTML-структура состоит из неупорядоченного списка: каждый элемент списка содержит .cd-more-info (шаг название, краткое описание и изображения для мобильной версии) и <SPAN> элемент, используемый для создания индикатора точки:

 

Обратите внимание, что .cd-nav элемент (тур навигации видна на каждом этапе) непосредственно не вставлена ​​в HTML, но она созданная с помощью JQuery.
Кроме того, .cd-app-screen элемент был использован для создания фона приложения, так что вы можете удалить его из HTML (и связанной с ними стилей) при использовании его в своих проектах.
Создаем тур по странице с подсказками на CSS3

Шаг 2. CSS

На мобильных устройствах, тур по странице будет открыт с помощью модального окна (с гладким эффектом масштаба, который достигается добавлением CSS3): каждый шаг показывает название, описание и изображение.

На устройствах с большим разрешением (окно, ширина которого больше, чем 1100px), мы присвоили позицию каждого .cd-single-step элемента списка:

4 различных классов были определены для управления положений подсказок по отношению к точечной индикатора ( .top , .bottom , .left и .right , чтобы быть назначен .cd-more-infoelement элемента).

Шаг 3. JS

Мы использовали JQuery для реализации функциональности тура с помощью навигации (с клавиатурой, сенсорным прикосновением и предыдущей / следующей стрелками навигации).

Вот и все. Готово!

Читайте также: