Шаблон 3D-занавеса на CSS3 и jQuery

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

 

ДЕМО

ИСХОДНИКИ

 

В настоящее время подход к дизайну с двумя блоками довольно распространен. С одной стороны - текстовый абзац, с другой - визуальный элемент. Мы попытались «оживить» переход между секциями, имитируя движение вдоль оси z во время прокрутки пользователя (или с помощью 2 кнопок навигации).

Мы не использовали какое-либо свойство CSS 3D, а только преобразования масштаба и перевода, управляемые через jQuery.

 

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

Структура HTML довольно проста: для каждого блока содержимого мы создали элемент <section>, содержащий div.cd-block и 2 div.cd-half-block. Первый .cd-half-block всегда пуст и используется для установки фонового изображения, а второй содержит текстовый абзац.

<section class="cd-section">
 <div class="cd-block">
 <h1>3D Curtain Template</h1>
 </div>
</section> <!-- .cd-section -->
 
<section class="cd-section">
 <div class="cd-block">
 <div class="cd-half-block"></div>
 
 <div class="cd-half-block">
 <p> <!-- Text here --> </p>
 </div>
 </div>
</section> <!-- .cd-section -->
 
<section class="cd-section">
 <!-- ... -->
</section> <!-- .cd-section -->

 

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

На небольших устройствах мы не реализовали эффект занавеса, поэтому вы увидите базовый макет со списком всех разделов (вы можете более подробно ознакомиться с исходным кодом). На настольных устройствах (ширина окна просмотра более 1170 пикселей) мы назначили позицию: фиксированную и верхнюю: 0 для элементов .cd-блока, чтобы разместить их поверх экрана (таким образом, они один поверх другого) , Поскольку их контейнеры - .cd-section - имеют высоту: 100vh (и положение: статические), они по-прежнему занимают свое собственное пространство (и таким образом мы можем прокручивать страницу).

Кроме того, мы назначили translateX для каждого элемента .cd-half-block (translateX (-100%) и translateX (100%) в качестве альтернативы: first-of-type и: nth-of-type (2)), чтобы они Перемещаются за пределы области просмотра.

@media only screen and (min-width: 1170px) {
  .cd-section {
    height: 100vh;
  }
  .cd-block {
    position: fixed;
    top: 0;
    left: 0;
  }
  .cd-half-block {
    height: 100vh;
    width: 50%;
    position: absolute;
    top: 0;
  }
  .cd-section:nth-of-type(even) .cd-half-block:first-of-type, 
  .cd-section:nth-of-type(odd) .cd-half-block:nth-of-type(2) {
    left: 0;
    transform: translateX(-100%);
  }
  .cd-section:nth-of-type(odd) .cd-half-block:first-of-type, 
  .cd-section:nth-of-type(even) .cd-half-block:nth-of-type(2) {
    right: 0;
    transform: translateX(100%);
  }
}

 

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

Каждая анимация секции состоит в основном из двух фаз: в первом из них элементы 2 .cd-half-block перемещаются обратно в окне просмотра (значение translateX варьируется от 100% / - 100% до 0); Во втором уменьшен .cd-block и уменьшается его непрозрачность (для имитации 3D-движения).

Для этого мы привязали функцию triggerAnimation () к событию прокрутки окна. Когда пользователь прокручивает, для каждого элемента .cd-section мы оцениваем - используя функцию animateSection () - значение translateX и масштаб в соответствии с окном scrollTop (и смещением offset().top).

$(window).on('scroll', function(){
	triggerAnimation();
});
 
function triggerAnimation(){
	if(MQ == 'desktop') {
		//if on desktop screen - animate sections
		window.requestAnimationFrame(animateSection);
	} // .....
}
 
function animateSection () {
	$('.cd-section').each(function(){
		var actualBlock = $(this),
			scale,
			translate,
			opacity;
 
		//evaluate scale/translate values
		//...
 
		scaleBlock(actualBlock.find('.cd-block'), scale, opacity);
		translateBlock(actualBlock.find('.cd-half-block').eq(0), '-'+translate);
		translateBlock(actualBlock.find('.cd-half-block').eq(1), translate);	
	});
}
 
function translateBlock(elem, value) {
	elem.css({
	 	//...
		'transform': 'translateX(' + value + ')',
	});
}
 
function scaleBlock(elem, value, opac) {
	elem.css({
	    //...
		'transform': 'scale(' + value + ')',
		'opacity': opac
	});
}

 

Вот и всё!

---