Автор

10 06.2017
Шаблон раздвижных панелей для сайта

Шаблон раздвижных панелей для сайта


Простой шаблон портфолио с изображениями предварительного просмотра проекта, которые выдвигаются, чтобы показать выбранный проект.

 

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

 

На этот раз мы играем с идеей перемещения блоков контента в качестве способа перехода от главной страницы / галереи к странице проекта. Все панели перемещаются вдоль оси y (ось x на более мелких устройствах), и движение инициируется тем, хочет ли пользователь узнать больше о проекте или хочет получить доступ к навигации.

 

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

Структура HTML состоит из двух неупорядоченных списков:ul.cd-projects-previews для изображений предварительного просмотра проекта и ul.cd-projects для деталей проекта, а nav.cd-primary-nav - обтекание основной навигации.

<div class="cd-projects-container">
<ul class="cd-projects-previews">
<li>
<a href="#0">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>

<li>
<!-- project preview here -->
</li>

<!-- other project previews here -->
</ul> <!-- .cd-projects-previews -->

<ul class="cd-projects">
<li>
<div class="preview-image">
<div class="cd-project-title">
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</div>

<div class="cd-project-info">
<!-- project description here -->
</div> <!-- .cd-project-info -->
</li>

<!-- projects here -->
</ul> <!-- .cd-projects -->

<button class="scroll cd-text-replace">Scroll</button>
</div> <!-- .cd-project-container -->

<nav class="cd-primary-nav" id="primary-nav">
<ul>
<li class="cd-label">Navigation</li>
<li><a href="#0">The team</a></li>
<!-- navigation items here -->
</ul>
</nav> <!-- .cd-primary-nav -->

 

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

На небольших устройствах каждый предварительный просмотр <li> имеет ширину, равную ширине и высоте окна просмотра, равной одной четверти высоты видового экрана (4 проекта в нашей демонстрации). Изображение предварительного просмотра проекта устанавливается как фоновое изображение его дочернего элемента <a>; Он имеет высоту, равную высоте окна просмотра, и переводится в верхнюю часть, чтобы покрыть весь видовой экран.

.cd-projects-previews li {
  height: 25%;
  width: 100%;
  overflow: hidden;
  transition: transform 0.5s;
}
.cd-projects-previews a {
  display: block;
  height: 100vh;
  width: 100%;
  opacity: 0;
  transition: opacity 0.5s;
  transform: translateY(0%);
}
.cd-projects-previews li:nth-of-type(2) a {
  transform: translateY(-25%);
}
.cd-projects-previews li:nth-of-type(3) a {
  transform: translateY(-50%);
}
.cd-projects-previews li:nth-of-type(4) a {
  transform: translateY(-75%);
}

Что касается деталей проекта .cd-projects > li, каждый элемент списка имеет абсолютную позицию, ширину и высоту, равную ширине и высоте окна просмотра, и по умолчанию скрыт.

.cd-projects > li {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity 0.3s;
}

Когда пользователь выбирает проект, класс .selected добавляется в соответствующие .cd-projects > li, а класс .slide-out добавляется в предварительный просмотр проекта (в случайном порядке и с задержкой для создания слайд- ).

.cd-projects-previews li.slide-out {
  transform: translateX(-100%);
}
 
.cd-projects > li.selected {
  z-index: 1;
  opacity: 1;
  transition: opacity 0s;
}

На больших устройствах (ширина видового экрана больше 1024 пикселей) высота предварительного просмотра проекта установлена на 100%, а ее ширина равна одной четвертой ширины окна просмотра, а дочерний элемент <a> переведен влево, чтобы покрыть весь видовой экран.

@media only screen and (min-width: 1024px) {
  .cd-projects-previews li {
    display: inline-block;
    height: 100%;
    width: 25%;
    float: left;
  }
  .cd-projects-previews li.slide-out {
    transform: translateY(-100%);
  }
  .cd-projects-previews a {
    /* width equal to window width */
    width: 400%;
  }
  .cd-projects-previews li:nth-of-type(2) a {
    transform: translateX(-25%);
  }
  .cd-projects-previews li:nth-of-type(3) a {
    transform: translateX(-50%);
  }
  .cd-projects-previews li:nth-of-type(4) a {
    transform: translateX(-75%);
  }
}

Что касается полностраничной навигации, то.cd-primary-nav размещается под контейнером .cd-projects-container; Когда пользователь нажимает кнопку .cd-nav-trigger, класс .slide-out добавляется в предварительный просмотр проекта, чтобы показать навигацию.

.cd-primary-nav {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s;
}
.cd-primary-nav.nav-visible {
  opacity: 1;
}

О числе проектов: если вам нужно создать более 4 проектов, вам необходимо обновить ширину / высоту предварительного просмотра проекта (и перевести значение его <a> пунктов). Однако если вы используете SASS, вы можете обновить переменную $items в partials> _variables.scss.

 

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

Мы использовали jQuery для обнаружения событий щелчка при предварительном просмотре проекта и элемента .cd-nav-trigger.
Когда пользователь выбирает проект / открывает основную навигацию, функция slideToggleProjects() выполняет разворачивание / выключение проектов, а функция makeUniqueRandom() используется для извлечения случайных чисел (от 1 до 4) для выхода проектов заказ.

function slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) {
  var randomProjectIndex = makeUniqueRandom();
  
  if( index < numRandoms - 1 ) {
    projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool);
    setTimeout( function(){
      //animate next preview project
      slideToggleProjects(projectsPreviewWrapper, projectIndex, index + 1, bool);
    }, 150);
  } else {
    //this is the last project preview to be animated 
    projectsPreviewWrapper.eq(randomProjectIndex).toggleClass('slide-out', bool).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
      // ...
      animating = false;
    });
  }
}

 

Вот и всё!


vk.com/club.ssdru

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


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

13 05.2017
Шаблон раздвижных панелей для сайта

Коллекция анимированных заголовков со сменными словами, которые заменяют друг друга с помощью CSS-переходов.


30 06.2016
Шаблон раздвижных панелей для сайта

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


26 04.2013
Шаблон раздвижных панелей для сайта

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


21 04.2013
Шаблон раздвижных панелей для сайта

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close