Шаблон слайд-панелей

demosourse

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

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

HTML структура

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 -->

Стили

Для небольших устройств ширина проекта будет занимать всё пространство, а высота проекта будет равна ¼ экрана, чтобы уместить 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;
}

Когда пользователь кликнет по проекту, то к элементу .cd-projects > li будет прикреплён класс .selected, а класс .slide-out будет добавлен к превью проекта.

.cd-projects-previews li.slide-out {
  transform: translateX(-100%);
}

.cd-projects > li.selected {
  z-index: 1;
  opacity: 1;
  transition: opacity 0s;
}

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

@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, то вам следует обновить значения width/height превью изображения (так же изменить значение translate внутренних элементов <a>). Если вы пользуетесь SASS, то достаточно будет обновить значение переменной $items в файле > _variables.scss.

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

Для отслеживания клика .cd-nav-trigger воспользуемся jQuery.

При раскрытии проекта будет вызываться функция slideToggleProjects(). makeUniqueRandom() используется для генерации случайной задержки при анимации “входа” проектов в область видимости.

function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
  var randomProjectIndex = makeUniqueRandom();

  if( index < numRandoms - 1 ) {
    projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
    setTimeout( function(){
      //анимация следующего проекта
      slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
    }, 150);
  } else {
    //анимация последнего проекта
    projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      // ...
      animating = false;
    });
  }
}

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/sliding-panels-template/
Перевел: Станислав Протасевич
Урок создан: 23 Февраля 2016
Просмотров: 9258
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^