Автор

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

Ранее я уже писал о подобном скрипте Highlight.js в статье «Подсветка синтаксиса в примерах кода» который я использую на своем сайте, в этой статье речь пойдет о подсветке синтаксиса кода на SyntaxHighlighter, который позволяет реализовать красивую подсветку синтаксиса на любом сайте. Данный скрипт поддерживает множество языков программирования, таких как, например, PHP, C++, JavaScript, C# и многие другие. В рамках данной статьи мы подробно рассмотрим процесс установки SyntaxHighlighter на сайт, а затем перейдем к подробной инструкции по использованию скрипта.


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

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


75 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close