Выделение особых фишек приложения

demosourse

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

Структура

В качестве структуры будем использовать ненумерованный список:

<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%;
}

Значение указываем в процентах, чтобы не зависеть от размера экрана устройства пользователя.

Для эффекта раскрытия создадим правило ::after для каждого элемента .cd-single-point.

.cd-single-point::after {
  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);
  }
}

Для отображения контента мы воспользуемся классом .is-open при клике по элементу .cd-single-point (используя jQuery). На экранах мобильных устройств (< 600px), элемент .cd-more-info будет раскрываться на весь экран.

На больших экранах область описания .cd-more-info будет фиксированной высоты и ширины. Вспомогательные классы (.cd-top, .cd-bottom, .cd-left и .cd-right) будут отвечать за отображение описания с той или иной стороны элемента .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;
  }
}

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

Для “прослушки” клика по .cd-single-point воспользуемся jQuery и добавим/уберём элементу класс is-open.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/points-of-interest/
Перевел: Станислав Протасевич
Урок создан: 16 Марта 2016
Просмотров: 5551
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^