Автор

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

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

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


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

Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента <canvas>.


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close