Автор

Галерея проектов на 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 и элемента списка для расширения / закрытия проекта.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close