Автор

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

 

Вот и всё!


vk.com/club.ssdru

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


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

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

Параллакс это изменение видимого положения объекта относительно удалённого фона в зависимости от положения наблюдателя. Параллакс используется в геодезии и астрономии для измерения расстояния до удалённых объектов. На явлении параллакса основано бинокулярное зрение. Но также параллакс активно используется дизайнерами для разработки необычных эффектов как в повседневной жизни, так и в веб-дизайне.


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

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.


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

Индикатор прогресса является неотъемлемой частью почти любого сайта. Обычно он используется для отображения состояния загрузки или какого либо другого процесса на сайте. Делаете ли вы веб-приложение или просто сайт, наверняка вам потребуется данный элемент интерфейса. В данном уроке мы сделаем стильный и анимированный индикатор прогресса с помощью правил CSS3. Все выглядит достаточно эффектно и будет радовать взор посетителей во время загрузки. Вот как это будет выглядеть..


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close