Автор

24 06.2017
Трехмерная складная панель

Трехмерная складная панель


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

 

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

 

Эффекты трехмерного сгиба довольно популярны в наши дни, главным образом потому, что они довольно часто интегрировались в мобильные приложения. Прекрасным примером является приложение iOS Peek Calendar. Благодаря трансформации и переходам CSS3 мы можем создать аналогичное взаимодействие в браузере!

Иногда эти 3D-эффекты кажутся слишком сильными, ненужными. С этим я не могу спорить. Однако будут случаи, когда вам нужно загрузить контент, процесс, требующий времени (даже если это всего лишь полсекунды). В этих случаях анимация может быть хорошим способом замены загрузочной панели или загрузки gif. Кроме того, с ростом собственных приложений, построенных поверх веб-фреймворков, изучение того, как создавать сложные преобразования CSS, - это туз в рукаве;)

 

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

HTML структурирован в 2 основных элемента: неупорядоченный список, содержащий блоки .cd-item и завернутый в элемент <main>, и элемент .cd-folding-panel, содержащий содержимое панели .cd-fold-content и  (.left-fold и .right-fold).

<main class="cd-main">
<ul class="cd-gallery">
<li class="cd-item">
<a href="item-1.html">
<div>
<h2>Title 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<b>View More</b>
</div>
</a>
</li>

<li class="cd-item">
<!-- content here -->
</li>

<!-- additional list items here -->
</ul> <!-- .cd-gallery -->
</main> <!-- .cd-main -->

<div class="cd-folding-panel">

<div class="fold-left"></div> <!-- this is the left fold -->

<div class="fold-right"></div> <!-- this is the right fold -->

<div class="cd-fold-content">
<!-- content will be loaded using javascript -->
</div>

<a class="cd-close" href="#0"></a>
</div> <!-- .cd-folding-panel -->

 

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

Чтобы реализовать нашу анимацию, мы использовали CSS3 Transformations, применяемые к элементам .left-fold, .right-fold, .cd-main и .cd-item.

2 раза создаются анимирующие ::after псевдоэлементов .left-fold и .right-fold.

На мобильном телефоне мы анималируем только правую складку (элемент .left-fold имеет дисплей: none): по умолчанию панель .cd-folding-panel (и ее дочерняя .right-panel) имеет фиксированную позицию и охватывает весь видовой экран (Но его видимость скрыта), а right-panel::after переводится влево и поворачивается (translateX(-100%)  rotateY(-90deg), с transform-origin: right center).
Когда пользователь нажимает на один из .cd-item, основное содержимое передается вправо (с использованием класса .fold-is-open), а right-fold::after преобразуется в окно просмотра и поворачивается Назад (используя класс .is-open, назначенный на панель .cd-folding-panel).

.cd-main {
  overflow-x: hidden;
}
.cd-main > * {
  transition: transform 0.5s 0.4s;
}
.cd-main.fold-is-open > * {
  /* on mobile - translate .cd-main content to the right when the .cd-folding-panel is open */
  transform: translateX(100%);
  transition: transform 0.5s 0s;
}
 
.cd-folding-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  visibility: hidden;
  overflow: hidden;
  transition: visibility 0s 0.9s;
}
.cd-folding-panel .fold-left,
.cd-folding-panel .fold-right {
  /* the :after elements of .fold-left and .fold-right are the 2 fold sides */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* enable a 3D-space for children elements */
  perspective: 2000px;
}
.cd-folding-panel .fold-right {
  perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
  /* on mobile only the right fold side is visible */
  display: none;
}
.cd-folding-panel .fold-right::after {
  /* 2 fold sides */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: right center;
  transform: translateX(-100%) rotateY(-90deg);
  transition: transform 0.5s 0.4s, background-color 0.5s 0.4s;
}
.cd-folding-panel.is-open {
  visibility: visible;
  transition: visibility 0s 0s;
}
.cd-folding-panel.is-open .fold-right::after {
  transform: translateX(0);
  transition: transform 0.5s 0s, background-color 0.5s 0s;
}

На настольных устройствах (ширина видового экрана> 1100px) оба ::after псевдоэлементов анимированы: .cd-folding-panel теперь помещается в центр окна просмотра (ширина: 800 пикселей), .left-panel и .right-panel имеет float: left и ширину, равные половине их родительского (400px). Их ::after псевдоэлементов вращаются (rotateY (-90deg)) и переводятся влево (.left-panel::after-translateX (100%)) или вправо (.right-panel::after- translateX (-100%)).

Когда пользователь нажимает на один из .cd-item, они переводятся влево (:nth-of-type(2n+1)) или вправо (:nth-of-type(2n)), а оба ::after того как псевдоэлементы будут переведены и повернуты назад (rotateY (0) translateX (0)).

@media only screen and (min-width: 1100px) {
  .cd-item {
    width: 50%;
    float: left;
    transition: transform 0.5s 0.4s;
  }
  .fold-is-open .cd-item {
    transition: transform 0.5s 0s;
    transform: translateX(-400px);
  }
  .fold-is-open .cd-item:nth-of-type(2n) {
    transform: translateX(400px);
  }
}
 
@media only screen and (min-width: 1100px) {
  .cd-folding-panel {
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
  }
  .cd-folding-panel .fold-left,
  .cd-folding-panel .fold-right {
    width: 50%;
    float: left;
    height: 100%;
  }
  .cd-folding-panel .fold-right {
    /* change perspective-origin so that the 2 fold sides have the same vanishing point */
    perspective-origin: 0% 50%;
  }
  .cd-folding-panel .fold-right::after {
    transform-origin: right center;
    transform: translateX(-100%) rotateY(-90deg);
  }
  .cd-folding-panel .fold-left {
    display: block;
    /* change perspective-origin so that the 2 fold sides have the same vanishing point */
    perspective-origin: 100% 50%;
  }
  .cd-folding-panel .fold-left::after {
    transform-origin: left center;
    transform: translateX(100%) rotateY(90deg);
  }
  .cd-folding-panel.is-open .fold-right::after,
  .cd-folding-panel.is-open .fold-left::after {
    transform: translateX(0);
    transition: transform 0.5s 0s, background-color 0.5s 0s;
  }
}

Одна важная нота: каждый ::after псевдоэлемента имеет, по умолчанию, точку исчезновения для своего трехмерного пространства, центр его родителя (так, в нашем случае, центр панели .left-panel и .right-panel). Чтобы анимация работала правильно, мы изменили перспективное происхождение этих двух элементов, чтобы центр просмотра был как точка схода.

.cd-folding-panel .fold-right {
  perspective-origin: 0% 50%;
}
.cd-folding-panel .fold-left {
  perspective-origin: 100% 50%;
}

 

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

В файле index.html элемент .cd-fold-content изначально пуст.
Когда пользователь выбирает один из .cd-item elements, мы использовали функцию load () для вставки правильного содержимого внутри .cd-fold-content (мы создали новый html-файл - item-1.html, item-2. Html, ... - для каждого .cd-item, чтобы сохранить новый контент).
После добавления нового содержимого html назначаются соответствующие классы и запускается анимация.

/* open folding content */
$('.cd-gallery a').on('click', function(event){
	event.preventDefault();
	openItemInfo($(this).attr('href'));
});
function openItemInfo(url) {
	/* check if mobile or desktop */
	var mq = viewportSize();
	if( $('.cd-gallery').offset().top > $(window).scrollTop() && mq != 'mobile') {
		/* if content is visible above the .cd-gallery - scroll before opening the folding panel */
		$('body,html').animate({
			'scrollTop': $('.cd-gallery').offset().top
		}, 100, function(){ 
           	toggleContent(url, true);
        }); 
 
	} else {
		toggleContent(url, true);
	}
}
 
function toggleContent(url, bool) {
	if( bool ) {
		/* load and show new content */
		$('.cd-fold-content').load(url+' .cd-fold-content > *', function(event){
			$('body').addClass('overflow-hidden');
			$('.cd-folding-panel').addClass('is-open');
			$('.cd-main').addClass('fold-is-open');
		});
 
	} else {
		/* close the folding panel */
		$('.cd-folding-panel').removeClass('is-open')
		$('.cd-main').removeClass('fold-is-open');
		
		/* ...*/
	}
	
}

Примечание:

Мы выполнили функцию basic load () для загрузки нового контента, но вы можете заменить его, например, правильным $ .ajax-вызовом для обработки ошибок, запроса отправить и т. д. В соответствии с вашим проектом.

 

Вот и всё!


vk.com/club.ssdru

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


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

15 08.2013
Трехмерная складная панель

Прогресс веб-дизайна не стоит на месте,большие гиганты ит-индустрии диктуют нам правила и направления в разработке дизайна, совсем недавно все стали переводить свои дизайны в минимализм, а именно в тренд Metro UI, объемные сайты постепенно стали исчезать ведь им производят рестайлинг, в скором времени будем на них любоваться как на динозавров. Буквально за несколько недель, с момента показа новой iOS 7, произошел легкий сдвиг в сознании не только у дизайнеров, но и у пользователей, имя ему — плоский дизайн.


26 04.2013
Трехмерная складная панель

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


02 05.2013
Трехмерная складная панель

Во время просмотра web - я заметил новые интересные библиотека - TN3. Это jQuery коллекции изображений в слайд-шоу, c эффектами перехода, несколько альбомов опций и т.д. Кроме того, вы сможете настроить его (через CSS). Сегодня я покажу вам, как можно реализовать эту галерею, чтобы создать собственный фотоальбом.


19 04.2013
Трехмерная складная панель

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close