Автор

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

Как установить кнопки социальных сетей для своего сайта или как добавить блок с кнопками социальных сетей — тема данного урока. Я постараюсь дать вам информацию о самых популярных способах размещения кнопок.

Размещение кнопок социальных сетей на сайте при помощи официальных виджетов:

Кнопка Вконтакте- Мне нравится
Кнопка FaceBook — Like
Кнопка Twitter — Твитнуть
Кнопка Одноклассники — Класс
Кнопка Google — Plus 1


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close