Шаблон 3D портфолио

demosourse

Шаблон портфолио с 3D разворотом по секциям.

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

HTML

HTML структура состоит из двух основных элементов: nav.cd-3d-portfolio-navigation для навигации по проектам и div.projects для контейнера проектов. Внутри div.projects три ненумерованных списка (ul.row) нужны для реализации вращения.

<div class="cd-3d-portfolio">
	<nav class="cd-3d-portfolio-navigation">
		<div class="cd-wrapper">
			<h1>3D Portfolio Template</h1>

			<ul>
				<li><a href="#0" class="selected">Filter 1</a></li>
				<li><a href="#0">Filter 2</a></li>
				<li><a href="#0">Filter 3</a></li>
			</ul>
		</div>
	</nav> <!-- .cd-3d-portfolio-navigation -->

	<div class="projects">
		<ul class="row">
			<li class="front-face selected project-1">
				<div class="project-wrapper">
					<div class="project-image">
						<div class="project-title">
							<h2>Project 1</h2>
						</div>
					</div> <!-- .project-image -->

					<div class="project-content">
						<!-- project content here -->
					</div> <!-- .project-content -->

					<a href="#0" class="close-project">Close</a>
				</div> <!-- .project-wrapper -->
			</li>

			<li class="right-face project-2">
				<div class="project-wrapper">
					<div class="project-image">
						<div class="project-title">
							<h2>Project 2</h2>
						</div>
					</div> <!-- .project-image -->

					<div class="project-content">
						<!-- project content here -->
					</div> <!-- .project-content -->

					<a href="#0" class="close-project">Close</a>
				</div> <!-- .project-wrapper -->
			</li>

			<li class="right-face project-3">
				<div class="project-wrapper">
					<div class="project-image">
						<div class="project-title">
							<h2>Project 3</h2>
						</div>
					</div> <!-- .project-image -->

					<div class="project-content">
						<!-- project content here -->
					</div> <!-- .project-content -->

					<a href="#0" class="close-project">Close</a>
				</div> <!-- .project-wrapper -->
			</li>
		</ul> <!-- .row -->

		<ul class="row">
			<!-- projects here -->
		</ul> <!-- .row -->

		<ul class="row">
			<!-- projects here -->
		</ul> <!-- .row -->
	</div><!-- .projects -->
</div>

Стили

Каждый элемент ul.row будет изменять свою форму по оси Z-axis.

Вот пример нужного нам эффекта (создан в Adobe After Effects):

.cd-3d-portfolio .projects .row {
  height: 25vh;
  position: relative;
  z-index: 1;
  /* position its children in a 3d space */
  transform-style: preserve-3d;
  transform: translateZ(-50vw);
  transition: transform 0.6s cubic-bezier(0.5, 0, 0.1, 1);
}

.cd-3d-portfolio .projects .row > li {
  /* this is the single project */
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.cd-3d-portfolio .projects .row > li.front-face {
  transform: translateZ(50vw);
}
.cd-3d-portfolio .projects .row > li.right-face {
  transform: rotateY(90deg) translateZ(50vw);
}
.cd-3d-portfolio .projects .row > li.left-face {
  transform: rotateY(-90deg) translateZ(50vw);
}
.cd-3d-portfolio .projects .row > li.back-face {
  transform: rotateY(180deg) translateZ(50vw);
}

Как только элемент .row развернулся, то мы должны отобразить проекты.

Контент проекта помещён в элемент с классом .project-content. При отображении проекта мы сменим значение опции overflow элемента .row > li и таким образом наш контент отобразится пользователю.

.cd-3d-portfolio .projects .project-image {
  position: relative;
  width: 100%;
  height: 25%;
  transition: transform 0.6s;
}
.cd-3d-portfolio .projects .project-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  height: 240%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cd-3d-portfolio .projects .project-content {
  position: absolute;
  /* place the content right below the project image */
  top: 60%;
  width: 100%;
  background: white;
}

Для реализации 3D поворота задействуем свойство transform-style элементов .row.

.no-preserve3d .cd-3d-portfolio .projects .row {
  	/* fallback for browsers that don't support the preser3d property */
    transform: translateZ(0);
}
.no-preserve3d .cd-3d-portfolio .projects .row > li {
  	opacity: 0;
  	transform: translateX(0);
}
.no-preserve3d .cd-3d-portfolio .projects .row > li.front-face,
.no-preserve3d .cd-3d-portfolio .projects .row > li.right-face,
.no-preserve3d .cd-3d-portfolio .projects .row > li.left-face,
.no-preserve3d .cd-3d-portfolio .projects .row > li.back-face {
    transform: translateX(0);
}
.no-preserve3d .cd-3d-portfolio .projects .row > li.selected {
  opacity: 1;
}

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

Для реализации 3D портфолио создаём объект Portfolio3D и вызываем функцию bindEvents для привязки событий к элементам.

function Portfolio3D( element ) {
	//define a Portfolio3D object
	this.element = element;
	this.navigation = this.element.children('.cd-3d-portfolio-navigation');
	this.rowsWrapper = this.element.children('.projects');
	this.rows = this.rowsWrapper.children('.row');
	this.visibleFace = 'front';
	this.visibleRowIndex = 0;
	this.rotationValue = 0;
	//animating variables
	this.animating = false;
	this.scrolling = false;
	// bind portfolio events
	this.bindEvents();
}

if( $('.cd-3d-portfolio').length > 0 ) {
	var portfolios3D = [];
	$('.cd-3d-portfolio').each(function(){
		//create a Portfolio3D object for each .cd-3d-portfolio
		portfolios3D.push(new Portfolio3D($(this)));
	});
}

В свойстве visibleFace хранится текущее состояние элемента.

При клике по элементу навигации будет вызван метод showNewContent() и запустится вся свистопляска.

Portfolio3D.prototype.bindEvents = function() {
	var self = this;

	this.navigation.on('click', 'a:not(.selected)', function(event){
		//update visible projects when clicking on the filter
		event.preventDefault();
		if( !self.animating ) {
			self.animating = true;
			var index = $(this).parent('li').index();

			//show new projects
			self.showNewContent(index);

			//update filter selected element
			//..
		}
	});

	//...
};

Portfolio3D.prototype.showNewContent = function(index) {
	var self = this,
		direction = ( index > self.visibleRowIndex ) ? 'rightToLeft' : 'leftToRight',
		rotationParams = this.getRotationPrameters( direction ),
		newVisibleFace = rotationParams[0],
		rotationY = rotationParams[1],
		translateZ = $(window).width()/2;

	//rotate the parallelepiped
	this.setTransform(rotationY, translateZ);

	//update .row > li classes
	//...

	//update Portfolio3D properties
	//..
};

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://codyhouse.co/gem/3d-portfolio-template/
Перевел: Станислав Протасевич
Урок создан: 6 Ноября 2016
Просмотров: 3870
Правила перепечатки

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

^ Наверх ^