Автор

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

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


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

 

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

 

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

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

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


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

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


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

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


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

Полноразмерный, адаптивный и простой в настройке слайдер.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close