Автор

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

Шаблон 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
	});
}

 

Вот и всё!


vk.com/club.ssdru

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


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

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

Хотите создать слайдер с миниатюрами изображений для Вашего сайта, да так чтобы они корректно отображались в браузерах и были адаптированы под изменения размеров окна обозревателя, тогда этот урок Вас должен заинтересовать. Для этого мы будем использовать Elastislide - плагин jQuery для адаптивной карусели, которая изменяет размер и алгоритм работы в соответствии с размером экрана. Если вставить карусель в контейнер с изменяющейся шириной, то и она будет изменять ширину.


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close