Автор

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

Полноэкранная навигация с плавающими элементами меню на 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-переходе.

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

Примечание!

Мы устанавливаем режим анимации-заливки: вперед, чтобы элементы списка не теряли свою позицию в конце анимации (из-за разных значений задержки анимации мы не могли назначить translateY (0) непосредственно Элементы списка).

.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.

 

Вот и всё!


vk.com/club.ssdru

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


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

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

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


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

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


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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


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

Слайд-шоу со скользящими панелями, которые открывают новые фиксированные фоновые изображения.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close