Автор

08 09.2017
Галерея проектов на jQuery

Галерея проектов на jQuery


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

 

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

 

Реальная сила переходов CSS заключается в обеспечении плавного перехода от точки A в точку B. Пользователь движется через изменение, он не получает немедленного нового результата. Именно эти дополнительные ключевые кадры позволяют создавать приятные движения, подобные веб-впечатлениям.

В этом примере мы используем CSS-переходы и трансформации, а также свойство CSS-привязки для создания эффекта «погружения» и раскрываем дополнительный контент для каждого проекта.

 

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

Структура HTML представляет собой неупорядоченный список, заключенный внутри элемента <div>. Каждый элемент списка содержит div.cd-title (заголовок и краткое описание) и div.cd-project-info (дополнительная информация). Изображение проекта задается как фоновое изображение элемента списка ::after псевдоэлемента.

<div class="projects-container">
<ul>
<li>
<div class="cd-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div> <!-- .cd-title -->

<div class="cd-project-info">
<p><!-- your content here --></p>
</div> <!-- .cd-project-info -->
</li>

<li>
<!-- .... -->
</li>

<!-- .... -->
</ul>
<a href="#0" class="cd-close">Close</a>
<a href="#0" class="cd-scroll">Scroll</a>
</div> <!-- .project-container -->

 

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

На маленьких устройствах каждый элемент списка имеет ширину, равную ширине окна просмотра, высоту, равную одной четверти высоты видового экрана (4 проекта в нашей демонстрации) и translateX(-100%), так что она перемещается за пределы области просмотра. После загрузки фоновых изображений (событие, обнаруженное в jQuery) класс .is-loaded присваивается элементам списка (translateX(0)), чтобы переместить их обратно в окно просмотра. Переходы CSS3 используются для достижения плавной анимации.

.projects-container li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 25%;
  transition: transform 0.4s;
  /* on mobile -  move items outside the viewport */
  transform: translateX(-100%);
}
.projects-container li.is-loaded {
  /* move items in the viewport when background images have been loaded */
  transform: translateX(0);
}
.projects-container li::after {
  /* background image */
  background-image: url("../img/img-1-small.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.projects-container li:nth-of-type(2) {
  top: 25vh;
}
.projects-container li:nth-of-type(2)::after {
  background-image: url("../img/img-2-small.jpg");
}
/*other projects*/

Когда пользователь нажимает на один проект, классу .is-full-width присваивается выбранный элемент списка: высота ::after псевдоэлемента устанавливается равной 100vh (единицы просмотра), тогда как видимость project-info изменяется к видимым.

.projects-container li.is-full-width {
  /* selected item */
  top: 0;
  height: auto;
  z-index: 1;
}
.projects-container li.is-full-width::after {
  height: 100vh;
}
 
.cd-project-info {
  visibility: hidden;
  opacity: 0;
}
.is-full-width .cd-project-info {
  visibility: visible;
  opacity: 1;
}

На больших экранах каждый элемент списка имеет высоту, равную высоте окна просмотра и ширине, равной одной четверти ширины окна просмотра. Кроме того, background-attachment элементов списка ::after псевдоэлемента установлена на фиксированное: таким образом изображение фиксируется относительно видового экрана (не перемещается при прокрутке выбранного проекта) и охватывает весь видовой экран (размер фона: обложка).

Одно важное замечание:

Мы использовали свойство list-item ::before pseudo-element content для доступа (в js-файле) атрибута url-образа (это используется для определения того, загружены ли фоновые изображения). Поэтому каждый раз, когда вы устанавливаете новое фоновое изображение для псевдоэлемента ::after, вам также необходимо обновить атрибут content ::before pseudo.

.projects-container li::after {
  background-image: url("../img/img-1-small.jpg");
}
.projects-container li::before {
  /* never visible - this is used in jQuery to detect if the background image has been loaded  */
  content: 'img/img-1-small.jpg';
  display: none;
}
@media only screen and (min-width: 1024px) {
  .projects-container li:first-of-type::after {
    background-image: url("../img/img-1-large.jpg");
  }
  .projects-container li:first-of-type::before {
    content: 'img/img-1-large.jpg';
  }
}
/*other projects*/

 

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

Мы использовали jQuery для определения того, когда загружаются фоновые изображения проекта: как только они появляются, функция цикла showCaption() вызывается, чтобы присвоить класс .is-loaded каждому элементу списка.
Кроме того, обнаружено событие click на элементах .cd-close и элемента списка для расширения / закрытия проекта.

 

Вот и всё!


vk.com/club.ssdru

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


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

08 06.2017
Галерея проектов на jQuery

Простая 3D-анимация для ваших элементов галереи, чтобы пользователи могли легко узнать больше о ваших продуктах, не покидая страницу.


23 04.2013
Галерея проектов на jQuery

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


12 05.2013
Галерея проектов на jQuery

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


28 05.2017
Галерея проектов на jQuery

Список разделенных блоков, которые воссоединяются при прокрутке, имитируя движение по оси Z с помощью преобразований CSS и jQuery.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close