Панели с эффектом скольжения на CSS и jQuery

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

Сложность

Изображения: unsplash.com.

Создание разметки

В HTML разметке мы создали два неупорядоченных списка, первый с классом .cd-projects-previews для предварительного просмотра изображений, второй с классом .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>
<!-- предварительный просмотр -->
</li>
</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">
<!-- описание проекта -->
</div> <!-- .cd-project-info -->
</li>
 
<!-- проекты -->
</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>
<!-- навигация -->
</ul>
</nav> <!-- .cd-primary-nav -->

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

На небольших устройствах, каждый элемент предварительного просмотра li имеет ширину равную ширине viewport и высоту равную одной-четвертой высоты viewport (т.к. 4 проекта в демо). Для предварительного просмотра изображений, установим свойство background-image для дочернего элемента a, он имеет высоту равную высоте viewport.

.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), каждому элементу списка зададим свойство position: absolute, ширина и высота будет равна ширине и высоте viewport, по умолчанию они будут скрыты.

.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;
}

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

@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-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 внутри _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;
    });
  }
}

 

Перевод статьи Sliding Panels Template

Тэги: transition

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.