Техно-мир

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

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

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

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

/* Эффект сдвига влево */
.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;
}

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

    Главная
    Новости
    Изображения
    Загрузки
    Закладки
    Сообщения
    Безопасность

Автор: Dark5ider

Исходники в архиве. Вернуться назад