Автор

10 06.2017
Шаблон раздвижных панелей для сайта

Шаблон раздвижных панелей для сайта


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

 

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

 

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

 

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

Структура HTML состоит из двух неупорядоченных списков:ul.cd-projects-previews для изображений предварительного просмотра проекта и ul.cd-projects для деталей проекта, а nav.cd-primary-nav - обтекание основной навигации.

<div class="cd-projects-container">
<ul class="cd-projects-previews">
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>

<li>
<!-- project preview here -->
</li>

<!-- other project previews here -->
</ul> <!-- .cd-projects-previews -->

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

<div class="cd-project-info">
<!-- project description here -->
</div> <!-- .cd-project-info -->
</li>

<!-- projects here -->
</ul> <!-- .cd-projects -->

<button class="scroll cd-text-replace">Scroll</button>
</div> <!-- .cd-project-container -->

<nav class="cd-primary-nav" id="primary-nav">
<ul>
<li class="cd-label">Navigation</li>
<li><a href="#0">The team</a></li>
<!-- navigation items here -->
</ul>
</nav> <!-- .cd-primary-nav -->

 

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

На небольших устройствах каждый предварительный просмотр <li> имеет ширину, равную ширине и высоте окна просмотра, равной одной четверти высоты видового экрана (4 проекта в нашей демонстрации). Изображение предварительного просмотра проекта устанавливается как фоновое изображение его дочернего элемента <a>; Он имеет высоту, равную высоте окна просмотра, и переводится в верхнюю часть, чтобы покрыть весь видовой экран.

.cd-projects-previews li {
  height: 25%;
  width: 100%;
  overflow: hidden;
  transition: transform 0.5s;
}
.cd-projects-previews a {
  display: block;
  height: 100vh;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  transform: translateY(0%);
}
.cd-projects-previews li:nth-of-type(2) a {
  transform: translateY(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
  transform: translateY(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
  transform: translateY(-75%);
}

Что касается деталей проекта .cd-projects > li, каждый элемент списка имеет абсолютную позицию, ширину и высоту, равную ширине и высоте окна просмотра, и по умолчанию скрыт.

.cd-projects > li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

Когда пользователь выбирает проект, класс .selected добавляется в соответствующие .cd-projects > li, а класс .slide-out добавляется в предварительный просмотр проекта (в случайном порядке и с задержкой для создания слайд- ).

.cd-projects-previews li.slide-out {
  transform: translateX(-100%);
}
 
.cd-projects > li.selected {
  z-index: 1;
  opacity: 1;
  transition: opacity 0s;
}

На больших устройствах (ширина видового экрана больше 1024 пикселей) высота предварительного просмотра проекта установлена на 100%, а ее ширина равна одной четвертой ширины окна просмотра, а дочерний элемент <a> переведен влево, чтобы покрыть весь видовой экран.

@media only screen and (min-width: 1024px) {
  .cd-projects-previews li {
    display: inline-block;
    height: 100%;
    width: 25%;
    float: left;
  }
  .cd-projects-previews li.slide-out {
    transform: translateY(-100%);
  }
  .cd-projects-previews a {
    /* width equal to window width */
    width: 400%;
  }
  .cd-projects-previews li:nth-of-type(2) a {
    transform: translateX(-25%);
  }
  .cd-projects-previews li:nth-of-type(3) a {
    transform: translateX(-50%);
  }
  .cd-projects-previews li:nth-of-type(4) a {
    transform: translateX(-75%);
  }
}

Что касается полностраничной навигации, то.cd-primary-nav размещается под контейнером .cd-projects-container; Когда пользователь нажимает кнопку .cd-nav-trigger, класс .slide-out добавляется в предварительный просмотр проекта, чтобы показать навигацию.

.cd-primary-nav {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s;
}
.cd-primary-nav.nav-visible {
  opacity: 1;
}

О числе проектов: если вам нужно создать более 4 проектов, вам необходимо обновить ширину / высоту предварительного просмотра проекта (и перевести значение его <a> пунктов). Однако если вы используете SASS, вы можете обновить переменную $items в partials> _variables.scss.

 

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

Мы использовали jQuery для обнаружения событий щелчка при предварительном просмотре проекта и элемента .cd-nav-trigger.
Когда пользователь выбирает проект / открывает основную навигацию, функция slideToggleProjects() выполняет разворачивание / выключение проектов, а функция makeUniqueRandom() используется для извлечения случайных чисел (от 1 до 4) для выхода проектов заказ.

function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
  var randomProjectIndex = makeUniqueRandom();
  
  if( index < numRandoms - 1 ) {
    projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
    setTimeout( function(){
      //animate next preview project
      slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
    }, 150);
  } else {
    //this is the last project preview to be animated 
    projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      // ...
      animating = false;
    });
  }
}

 

Вот и всё!


vk.com/club.ssdru

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


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

19 05.2017
Шаблон раздвижных панелей для сайта

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


16 04.2013
Шаблон раздвижных панелей для сайта

Сделаем необычные кнопки с использованием только одного тега ссылки, и конечно же благодаря CSS3.

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


05 12.2015
Шаблон раздвижных панелей для сайта

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


11 12.2015
Шаблон раздвижных панелей для сайта

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close