Полноэкранная навигация с плавающими элементами меню на jQuery

Бывают случаи, когда вы хотите представить пользователю выбор, с фокусом веб-страницы являются разные варианты. Независимо от того, является ли это модальной навигацией или списком категорий, сегодняшний самородок вас охватывает!

 

ДЕМО

ИСХОДНИКИ

 

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

 

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

Структура HTML довольно простая: навигация представляет собой неупорядоченный список, семантически завернутый в элемент <nav> и помещенный в div.cd-bouncy-nav-modal.

<div class="cd-bouncy-nav-modal">
 <nav>
 <ul class="cd-bouncy-nav">
 <li><a href="#0">Item 1</a></li>
 <!-- other list items here -->
 </ul>
 </nav>
 <a href="#0" class="cd-close">Close modal</a>
</div>

 

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

Мы использовали как CSS3-переходы, так и анимации. По умолчанию элементы списка навигации скрыты и перемещаются под окном просмотра (используя translateY (100vh)). Когда пользователь нажимает элемент .cd-bouncy-nav-trigger, класс .fade-in добавляется в .cd-bouncy-nav: его значения непрозрачности и видимости изменяются так, что они становятся видимыми (достигается плавный эффект Используя переходы CSS), в то время как элементы списка навигации анимируются с использованием анимации cd-move-in.

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

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

.cd-bouncy-nav-modal {
  position: fixed;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.1s 0s, visibility 0s 0s;
}
.cd-bouncy-nav li {
  transform: translateY(100vh);
}
.fade-in .cd-bouncy-nav li {
  animation: cd-move-in 0.4s;
  animation-fill-mode: forwards;
}
@keyframes cd-move-in {
  0% {
    transform: translateY(100vh);
  }
  65% {
    transform: translateY(-1.5vh);
  }
  100% {
    transform: translateY(0vh);
  }
}

 

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

Мы использовали jQuery для прослушивания события щелчка на .cd-bouncy-nav-trigger (или элементе .cd-close) и, соответственно, добавили / удалили класс .fade-in / .fade-out.

 

Вот и всё!

---