9.01.14, 12:03
1 комментарий
  Разное

Навигация на перспективе страницы

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

Нажатие содержание сайта сторону, чтобы показать навигацию, безусловно, стало тенденцией для мобильных навигаций. Подход отражает некоторые опыта в разработке приложений, где "виды" показаны с анимацией. Мы экспериментировали немного, и мы придумали небольшой набор эффектов, которые принимают страницу и переместить его в 3D, чтобы показать навигацию (или какой-либо другой контент, если вам нравится). Что приятно об этом является то, что мы буквально поставить сайт в перспективе, что позволяет интересным видом на содержание и возможности навигации.

Слайд в какую-нибудь сторону будь то сайта или приложения для показа навигации, безусловно стал тенденцией в мобильной навигации.
Удобно, привычно и не требует дополнительных действий. Поэкспериментировав немного, вышел небольшой набор эффектов, которые отодвигают страницу на второй план в перспективе, создавая тем самым эффект 3D и показывают меню.
Мне кажется это необычно и интересно.

Обратите внимание, это бета версия и возможны ошибки.

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

<div id="perspective" class="perspective effect-airbnb">
    <div class="container">
        <div class="wrapper">
            <!-- ... -->
        </div><!-- wrapper -->
    </div><!-- /container -->
    <nav class="outer-nav left vertical">
        <!-- ... -->
    </nav>
</div><!-- /perspective -->



В зависимости от эффекта мы создали классы к этим двум контейнерам.

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

/* Эффект сдвига влево */
.effect-moveleft {
    background: #f4f3f1;
}
 
.effect-moveleft .container {
    transition: transform 0.4s;
    transform-origin: 50% 50%;
}
 
.effect-moveleft .container::after {
    background: rgba(255,255,255,0.6);
}
 
.effect-moveleft.animate .container {
    transform: translateX(-50%) rotateY(45deg) translateZ(-50px);
}
 
/* Выпадание */
.no-csstransforms3d .effect-moveleft.animate .container {
    left: -75%;
}
 
/* Навигация */
.effect-moveleft .outer-nav a {
    color: #e86a32;
    opacity: 0;
    transform: translateX(100px) translateZ(-1000px);
    transition: transform 0.4s, opacity 0.4s;
}
 
.effect-moveleft .outer-nav a:hover {
    color: #333;
}
 
.effect-moveleft.animate .outer-nav a {
    opacity: 1;
    transform: translateX(0) translateZ(0);
}
 
.effect-moveleft.animate .outer-nav a:nth-child(2) {
    transition-delay: 0.04s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(3) {
    transition-delay: 0.08s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(4) {
    transition-delay: 0.12s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(5) {
    transition-delay: 0.16s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(6) {
    transition-delay: 0.2s;
}
 
.effect-moveleft.animate .outer-nav a:nth-child(7) {
    transition-delay: 0.24s;
}



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

<nav class="outer-nav left vertical">
    <a href="#" class="icon-home">Главная</a>
    <a href="#" class="icon-news">Новости</a>
    <a href="#" class="icon-image">Изображения</a>
    <a href="#" class="icon-upload">Загрузки</a>
    <a href="#" class="icon-star">Закладки</a>
    <a href="#" class="icon-mail">Сообщения</a>
    <a href="#" class="icon-lock">Безопасность</a>
</nav>




Автор: Dark5ider
Исходники в архиве.

СКАЧАТЬ

Вес файла
36.36 Kb

Комментарии

  1. Katrin 11 января 2014 11:13                    

    О!!!
    Отлично!!! Знаю к чему его прилеплю!!! respekt

Напишите своё мнение