Автор

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

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


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

 

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

 

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

 

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

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

<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. Данный плеер сделан в темных тонах, тем не менее его легко редактировать, и подогнать под свой дизайн.


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

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


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

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close