Шаблон - из двух анимированных блоков контента на 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);
}

 

Вот и всё!

---