Автор

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

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


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

 

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

 

На этот раз мы играем с идеей перемещения блоков контента в качестве способа перехода от главной страницы / галереи к странице проекта. Все панели перемещаются вдоль оси 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;
    });
  }
}

 

Вот и всё!

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

Сегодня один посетитель данного сайта выразил свое недовольство что я обманываю своих клиентов!!! Написал отзыв, но при этом не оставил своих координат для ответа!!! Можно было бы оставить без внимания этот отзыв, но я решил написать ответ, так как очень часто подобные умники пишут толком не разобравшись!


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close