Автор

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

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

В данном уроке мы рассмотрим слайдер изображений с анимированными подписи, отзывчивым интерфейсом и HTML элементами, как видео, IFrame и регулятора. При этом легко добавить неограниченное количество слайдов и заголовков. Используйте его в качестве слайдера изображений, галереи фотографий, ротатора для баннерной рекламы, или даже презентации. Чтобы существенно сократить время загрузки страницы, предварительная загрузка доступна для каждого слайдера, так что изображение будут загружаться постепенно.


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

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


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

Таблица цен, которая анимируется в форме покупки, когда пользователь выбирает нужную услугу.


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close