Автор

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

 

Вот и всё!

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

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close