Автор

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

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

Сделаем необычные кнопки с использованием только одного тега ссылки, и конечно же благодаря CSS3.

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


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

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


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

  1. Строить график на основе массива данных;
  2. Строить график на основе номер счетчика Яндекс.Метрики;
  3. Возможна частичная или полная кастомизация внешнего вида Информера;
  4. График строится с использованием html5 canvas;

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

Простой, отзывчивый слайдер с радиальным эффектом перехода на основе SVG clipPath и элементов маски.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close