Автор

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

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

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


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

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


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

Иногда вы просто хотите, чтобы на вашем сайте была оригинальная навигация и я предлагаю вашему вниманию интересное решение адаптивного 3D меню для сайта.


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

Здесь можно бесплатно воспользоваться готовыми примерами блочной css верстки слоями. Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close