Автор

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

 

Вот и всё!

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

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close