Автор

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

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


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

 

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

 

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

 

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

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

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

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Отображение информации на странице в виде jQuery вкладок.


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

Всем известен youtube, весьма популярный сервис для просмотра и размещения созданного пользователями видео со всего мира в интернете. Недавно был обновлен интерфейс данного сервиса, в котором появилось много чего нового и интересного. В данном уроке мы рассмотрим как создать идентичные кнопки как на youtube. Такой дизайн кнопок очень выразителен и отлично работает. Состояние по умолчанию не бросается в глаза посетителя, соревнуясь за его внимание с другими достойными элементами интерфейса. Данные кнопки выражают функционал, в отличие от ссылок..


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

Предлагаю вам, на мой взгляд, стильные и креативные SVG иконки с длинными тенями (46 шт.). Это коллекция иконок, распространяемых под лицензионным соглашением Creative Commons Attribution, а это значит, что вы можете использовать их бесплатно как в личных, так и в коммерческих проектах.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close