Автор

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

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


Вторичная панель содержимого, которая складывается плотно, поддерживается 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-вызовом для обработки ошибок, запроса отправить и т. д. В соответствии с вашим проектом.

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

Лично я применил календарь на сайте Усадьба «Сказка» по просьбе заказчика!


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

Список разделенных блоков, которые воссоединяются при прокрутке, имитируя движение по оси Z с помощью преобразований CSS и jQuery.


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

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


87 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close