Автор

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

Все популярней становятся сайты, в котором реализованы интерактивные фоны, зачастую это анимацию, какие-то не значительные эффекты, ранее ресурсы не всем позволяли просматривать "тяжелые" сайты, но сейчас прогресс не стоит на месте и интернет и мобильные устройства идут почти в ногу со своими дестктопными товарищами. Все мы знаем, что такие мобильные устройства на iOS и Windows Phone не поддерживают просмотр видео реализованных с помощью flash проигрывателя, но они прекрасно работают с HTML5.


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

Добавление небольших деталей может придать Вашему сайту завершенности. jQuery это прекрасная JavaScript библиотека, которая поможет довести мельчайшие детали до совершенства.


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

В наше время технологии для веб-мастеров быстро развиваются, предоставляя нам новые и все интересные возможности разработки новых креативных идей с помощью технологий  HTML 5,  jQuery и плагина Quicksand. Данное портфолио отлично выглядит и будет работать даже если у посетителя отключен JavaScript, то он все равно увидит работы, что благотворно сказывается на SEO сайта. Данное портфолио мозно с легкостью отредактировать под свое усмотрение и добавить в него необходимые элементы..


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

В данном уроке мы создадим интересные визуальные 3D эффекты с помощью CSS3 и jQuery. Идея для урока возникла под впечатлением страниц демонстрации проектов Google SketchUp.

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close