Галерея проектов на 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



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

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

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


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

В последнее время стали весьма популярны неординарные решения к построению сайта, зачастую веб-мастера стали отказываться от привычного построения ресурса и разрабатывать новые концепции верстки. Большое влияние на современный веб дизайн оказал дизайн metro ui который покорил своим минимализмом и простотой решений, что дизайнеры принялись разрабатывать сайты под данный интерфейс. В данном уроке мы рассмотрим как создать фиксированное вертикальное меню в стиле metro ui.


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

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


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

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


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

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


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