Автор

19 05.2017
Точки заслуживающие внимания

Точки заслуживающие внимания


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

 

ДЕМО
ИСХОДНИКИ

 

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

 

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

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

<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.

 

Вот и всё!


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

13 06.2014
Точки заслуживающие внимания

Все популярней становятся сайты, в котором реализованы интерактивные фоны, зачастую это анимацию, какие-то не значительные эффекты, ранее ресурсы не всем позволяли просматривать "тяжелые" сайты, но сейчас прогресс не стоит на месте и интернет и мобильные устройства идут почти в ногу со своими дестктопными товарищами. Все мы знаем, что такие мобильные устройства на iOS и Windows Phone не поддерживают просмотр видео реализованных с помощью flash проигрывателя, но они прекрасно работают с HTML5.


29 09.2014
Точки заслуживающие внимания

Крупные заголовки сайта стали весьма популярны, эта тенденция развивается достаточно быстро на рынке веб-дизайна, сегодня мы бы хотели предоставить коллекцию анимированных фоновых заголовков для вашего вдохновения. Мы будем использовать Canvas и Javascript, чтобы создать анимированный фон для крупных заголовков.


20 03.2013
Точки заслуживающие внимания

Здравствуйте, уважаемые читатели моего блога! А Вы пользуетесь генераторами CSS3 или HTML5? Если нет, то может стоит попробовать. Просто представьте, можно отказаться от ручного описания стилей для кнопок, углов в блоках, теней, градиентов если кто использует и так далее, так же HTML5. Зачем писать один и тот же код каждый раз при создании нового проекта, когда можно «забить» параметры в окошечки нажать кнопочку и получить готовый исходный код, а если надо то и пофиксить его!
В этой статье покажу Вам подборку из таких генераторов. Преимущественно это будут генераторы CSS3 и парочка для HTML5.


31 03.2013
Точки заслуживающие внимания

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


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close