Автор

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

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


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

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

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


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

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


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

Если вы используете какие то графические редакторы на сайте, или просто хотите скрасить некий материал с помощью выбора цвета, или дать возможность оформить на свой вкус комментарии пользователю тогда этот урок именно для Вас. В сегодняшнем уроке речь пойдет о скрипте Flexi Color Picker, который использует только JavaScript для создания интерфейса выбора цвета. Без flash, изображений, однопиксельных div. Для его работы не нужно никаких библиотек.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close