Шаблон портфолио с анимацией

demosourse

Шаблон портфолио, где каждый элемент раскрывается на полный экран.

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

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

HTML будет состоять из 3 основных элементов: .cd-nav-trigger, где будут храниться иконки навигации, nav.cd-primary-nav для основной навигации, и .cd-projects-containerwrapping для хранения ненумерованного списка проектов.

Каждый проект будет состоять из div.cd-title с названием проекта, а так же из описания проекта div.cd-project-info. Изображение будет фоновым: background-image псевдо-элемента .cd-title::before.

<header>
	<a href="#0" class="cd-logo"><img src="img/cd-logo.svg"></a>

	<button class="cd-nav-trigger">Menu<span aria-hidden="true" class="cd-icon"></span></button>
</header>

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

<div class="cd-projects-container">
	<ul>
		<li class="single-project">
			<div class="cd-title">
				<h2>Project 1</h2>
			</div> <!-- .cd-title -->

			<div class="cd-project-info">
				<button class="cd-scroll">Scroll down</button>

				<div class="content-wrapper">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam molestias suscipit mollitia vitae ea non ex, dignissimos aperiam minus magni totam sint culpa vel voluptate ipsa sunt repellendus. Ab, magni!
					</p>

					<!-- additional project info here -->
				</div>
			</div> <!-- .cd-project-info -->
		</li>

		<!-- other projects here -->
	</ul>
</div> <!-- .cd-projects-container -->

Стили

Блок div.cd-project-info будет 100% высоты и позиционирован релативно. В свою очередь каждый отдельный проект будет расположен абсолютно, его высота будет так же 100%, и будет складываться такой эффект, что все изображения лежать друг на друге.

Второй и третий проект будут сдвинуты по оси Y, заняв ? высоты контейнера .cd-project-info. Таким образом каждое из 3х изображений будет изначально отображаться на треть.

.cd-projects-container {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.cd-projects-container .single-project {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transition: transform 0.4s;
}
.cd-projects-container .single-project:nth-of-type(2) {
  transform: translateY(33.3333333333%);
}
.cd-projects-container .single-project:nth-of-type(3) {
  transform: translateY(66.6666666667%);
}

Вот небольшое графическое представление того, что мы хотим сделать:

Затем выставим высоту 33.33% элементу .cd-title и 300% псевдо-элементу .cd-title::before.

.cd-title {
  height: 33.3333333333%;
}
.cd-title::before {
  /* background image */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 300%;
  width: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.single-project:nth-of-type(1) .cd-title::before {
  background-image: url(../img/img-1.jpg);
}

При выборе проекта, воспользуемся классом .selected для смещения текущего проекта translateY(0), а всех соседних проектов translateY(100%). В результате будет раскрыт только выбранный проект.

.cd-projects-container .single-project.selected {
  /* selected project */
  transform: translateY(0);
}
.cd-projects-container .single-project.selected ~ li {
  /* hide siblings projects */
  transform: translateY(100%);
}

Высота контейнера .cd-project-info будет 100%, overflow: auto (для возможности прокрутки) и расположен в левом верхнем углу родителя .single-project.

.cd-project-info {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
.cd-project-info::before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  pointer-events: none;
}
.cd-project-info .content-wrapper {
  position: relative;
  z-index: 2;
  padding: 2em 0 3em;
  background-color: #FFFFFF;
}
.selected .cd-project-info {
  opacity: 1;
  visibility: visible;
  transition: opacity 0s, visibility 0s;
}

Для возможности навигации всей страницы, элемент .cd-primary-nav расположен ниже .cd-projects-container; при клике по .cd-nav-trigger, оставшиеся проекты, будут смещены вниз.

.cd-primary-nav {
  position: absolute;
  top: 0;
  left: 0;
  /* height = (100% - 9%) - 9% это расстояние между проектами при раскрытой навигации */
  height: 91%;
  width: 100%;
  overflow: auto;
  opacity: 0;
}
.cd-primary-nav ul {
  transform: translateY(50px);
  transition: transform 0.4s;
}
.cd-primary-nav.nav-open {
  opacity: 1;
}
.cd-primary-nav.nav-open ul {
  transform: translateY(0);
}

.cd-projects-container.nav-open .single-project {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  transform: translateY(91%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(2) {
  transform: translateY(94%);
}
.cd-projects-container.nav-open .single-project:nth-of-type(3) {
  transform: translateY(97%);
}

Работа с событиями

В этом примере мы использовали jQuery для отслеживания клика по элементам .cd-nav-trigger и .single-project, а так же для добавления/удаления классов.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/project-cards-template/
Перевел: Станислав Протасевич
Урок создан: 27 Октября 2015
Просмотров: 8686
Правила перепечатки


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

^ Наверх ^