Автор

Шаблон - из двух анимированных блоков контента на jQuery

Шаблон - из двух анимированных блоков контента на jQuery


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

 

ДЕМО
ИСХОДНИКИ

 

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

Структура html состоит из двух неупорядоченных списков, один .cd-images-list, содержащий изображения проекта (заданные как фоновое изображение элементов .cd-images-list > li, а другой - описания проекта, оба Завернутый в два разных элемента <div>.
Для создания навигации по проекту была использована дополнительная ul.block-navigation.

<div class="cd-image-block">
<ul class="cd-images-list">
<li class="is-selected">
<a href="#0">
<h2>2 Blocks Template</h2>
</a>
</li>

<li>
<a href="#0">
<h2>Project Two</h2>
</a>
</li>

<!-- other list items here -->
</ul>
</div> <!-- .cd-image-block -->

<div class="cd-content-block">
<ul>
<li class="is-selected">
<div>
<h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, illo!</h2>

<!-- additional content here -->
</div>
</li>

<li>
<div>
<h2>Lorem ipsum dolor sit amet, consectetur.</h2>

<!-- additional content here -->
</div>
</li>

<!-- other list items here -->
</ul>

<button class="cd-close">Close</button>
</div> <!-- .cd-content-block -->

<ul class="block-navigation">
<li><button class="cd-prev inactive">&larr; Prev</button></li>
<li><button class="cd-next">Next &rarr;</button></li>
</ul> <!-- .block-navigation -->

 

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

В мобильной версии элемент .cd-content-block (содержащий описания проектов) находится в фиксированном положении и транслируется за пределы области просмотра (справа), так что видны только изображения проекта. Когда пользователь отбирает / щелкает один из проектов, .cd-content-block переводится обратно в область просмотра (с использованием класса .is-visible), тогда как выбранный класс. Назначается элементу списка, содержащему выбранный Информация о проекте (его свойства непрозрачности и видимости установлены соответственно на 1 и видны).

.cd-content-block {
  /* move the block outside the viewport (to the right) - mobile only */
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  transform: translateX(100%);
  transition: transform 0.3s;
}
.cd-content-block.is-visible {
  transform: translateX(0);
}
.cd-content-block > ul > li {
  position: absolute;
  height: 100%;
  overflow-y: scroll;
  opacity: 0;
  visibility: hidden;
}
.cd-content-block > ul > li.is-selected {
  /* this is the selected content */
  position: relative;
  opacity: 1;
  visibility: visible;
}

На больших устройствах (ширина окна просмотра больше 768 пикселей) как .cd-image-block (контейнер изображений), так и .cd-content-block (контейнер описаний) имеют ширину: 50%, высоту: 100% и переполнение: Hidden (таким образом, дочерние элементы, находящиеся за пределами этой области, не будут видны).

По умолчанию оба .cd-image-block > ul > li и .cd-content-block > ul > li переводятся вправо (translateX (100%)), так что они не видны из-за их переполнения родителями ,

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

@media only screen and (min-width: 768px) {
  .cd-image-block,
  .cd-content-block {
    /* slider style - desktop version only */
    width: 50%;
    float: left;
    height: 100vh;
    overflow: hidden;
  }
  .cd-image-block > ul,
  .cd-content-block > ul {
    position: relative;
    height: 100%;
  }
  .cd-image-block > ul > li,
  .cd-content-block > ul > li {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /* by default, the items are moved to the right - relative to their parent elements */
    transform: translateX(100%);
    transition: transform 0.5s;
  }
  .cd-image-block > ul > li.is-selected,
  .cd-content-block > ul > li.is-selected {
    /* this is the visible item */
    position: absolute;
    transform: translateX(0);
  }
  .cd-image-block > ul > li.move-left,
  .cd-content-block > ul > li.move-left {
    /* this is the item hidden on the left */
    transform: translateX(-100%);
  }
}

 

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

Мы использовали jQuery для реализации навигации по проекту (как для клавиатуры, так и для предыдущей / следующей навигации) и для обнаружения событий щелчка на .cd-images-list > li > a (мобильной версии), чтобы открыть панель слайда.

Функция updateBlock() была определена для обновления видимого проекта и запускается как на мобильном устройстве (когда пользователь нажимает / снимает изображение проекта), так и на настольную версию (когда пользователь просматривает проекты с помощью навигации / клавиатуры).

function updateBlock(n, device) { //n is the index of the selected project 
	var imageItem = imagesList.eq(n), //imageList contains the .cd-images-list > li elements
		contentItem = contentList.eq(n); //contentList contains the .cd-content-block > ul > li elements
	
	//this function assigns the is-selected class to the 2 selected list items, removing it from their siblings
	classUpdate($([imageItem, contentItem])); 
	
	if( device == 'mobile') {
		//on mobile version
		contentItem.scrollTop(0);
		//add a cover layer to the images
		$('.cd-image-block').addClass('content-block-is-visible');
		//move the slide-in panel back into the viewport
		contentWrapper.addClass('is-visible');
	} else {
		//hide scrolling bar while changing project content
		contentList.addClass('overflow-hidden');
		contentItem.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
			//wait for the end of the animation
			contentItem.siblings().scrollTop(0);
			contentList.removeClass('overflow-hidden');
		});
	}
 
	//this function updates the visibility of the .block-navigation buttons according to visible project
	updateBlockNavigation(n);
}

 

Вот и всё!

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

vk.com/club.ssdru

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



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

Шаблон - из двух анимированных блоков контента на jQuery

Удобная и легко настраиваемая навигация для мегасайтов, обогащенная тонкой анимацией CSS и поддержкой устройств с отключенным javascript.


Шаблон - из двух анимированных блоков контента на jQuery

Меня зовут Сергей Целовальников, я являюсь руководителем студии «Studio Dtsign», в простонародье и в поисковых системах «Студия Целовальникова Сергея». Также я являюсь оффициальным партнером компании UMI.CMS в области разработки сайтов и веб дизайна, с богатым портфолио работ, созданных на этой системе управления сайтами.

О… UMI.CMS

Работа со многими бесплатными и иже с ними CMS-системами управления сайтов, коих я повидал немало до UMI, часто приходил к констатации фактов о наличии всяческих недостатков и пожинанию «плодов» бесплатного софта. И самый безобидный из них – «костность», негибкость, стандартная блочная систем и необходимость создания всех последующих страниц в единственном шаблоне дизайна сайта.......

 


Шаблон - из двух анимированных блоков контента на jQuery

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


Шаблон - из двух анимированных блоков контента на jQuery

Здесь можно бесплатно воспользоваться готовыми примерами блочной css верстки слоями. Каждый шаблон ниже содержит готовую резиновую и не резиновую верстку в две или три колонки с различным расположением. Во всех верстках css footer прижат к низу. Каждая div, блочная, дивная верстка валидна и проверена на кроссбраузерность.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close