Точки интереса (Points of Interest)

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

 

ДЕМО

ИСХОДНИКИ

 

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

 

Создание структуры

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

<div class="cd-product cd-container">
 <div class="cd-product-wrapper">
 <img src="img/cd-app-image.jpg"><!-- image of our product -->
 <ul>
 <li class="cd-single-point">
 <a class="cd-img-replace" href="#0">More</a>
 <div class="cd-more-info cd-top"> <!-- 4 classes available: cd-top, cd-bottom, cd-left, cd-right -->
 <h2><!-- Title here --></h2>
 <p><!-- Description here --></p>
 <a href="#0" class="cd-close-info cd-img-replace">Close</a>
 </div>
 </li> <!-- .cd-single-point -->
 <!-- other points of interest here -->
 </ul>
 </div> <!-- .cd-product-wrapper -->
</div> <!-- .cd-product -->

 

Добавление стиля

Сначала мы присвоили позицию каждому элементу списка .cd-single-point:

.cd-product-wrapper {
 position: relative;
}
 
.cd-single-point {
 position: absolute;
}
 
.cd-single-point:first-child {
 bottom: 40%;
 right: 30%;
}
.cd-single-point:nth-child(2) {
 bottom: 24%;
 right: 46%;
}
/*define here all the other list items position values*/

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

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

.cd-single-point::after {
  /* this is used to create the pulse animation */
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  animation: cd-pulse 2s infinite;
}
 
@keyframes cd-pulse {
  0% {
    transform: scale(1);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }
 
  50% {
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8);
  }
 
  100% {
    transform: scale(1.6);
    box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0);
  }
}

Чтобы показать информацию о точке интереса (элемент .cd-more-info), мы добавляем класс .is-open в элемент .cd-single-point при его нажатии (с помощью jQuery).

На мобильных телефонах (ширина экрана <600px) элемент .cd-more-info открывается в полноэкранном режиме (с эффектом плавного масштабирования достигается добавление перехода CSS3 в свойство scale).

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

.cd-single-point .cd-more-info {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
.cd-single-point.is-open .cd-more-info {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s, top 0.3s 0s, bottom 0.3s 0s, left 0.3s 0s, right 0.3s 0s;
}
 
@media only screen and (min-width: 600px) {
  .cd-single-point .cd-more-info {
    position: absolute;
    width: 220px;
    height: 240px;
  }
}

 

Обработка событий

Мы использовали jQuery для прослушивания событий щелчка по элементам списка .cd-single-point и последовательного добавления / удаления класса is-open.

 

Вот и всё!

---