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

 

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

Шаг 1. HTML

Структура нашего интереса точек неупорядоченный список вставляется в нашем обертки изображении:

Разметка достаточно проста и не должна вызвать трудностей, главное не забывайте правильно подключать скрипты, давайте перейдем к следующему шагу.

Подсказки в виде точек для сайта с помощью CSS3

Шаг 2. CSS

Во-первых, мы присвоили позицию для каждого .cd-single-point элемента списка:

Мы использовали проценты (вместо точек), так что точки подсказок сохранили свои позиции, независимо от размера экрана.

Для эффекта импульсов, мы создали ::after-псевдо-элемент для каждого .cd-single-point элемента списка и анимированные box-shadow для изменения значения масштаба с помощью CSS3 анимации. Мы устанавливаем  animation-iteration-count со значением бесконечности, так что анимация играет постоянно.

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

Мы использовали JQuery чтобы создать переключение на .cd-single-point элементах списка. Это позволит нам открывать и удалять значение кнопки подсказки.

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