Перспективная навигация для сайта

Несколько вариантов адаптивной полноэкранной навигации для сайта в 3D перспективе.

В скрипте предоставлено шесть разных эффектов.

1.Общая разметка страницы HTML

<div id="perspective" class="perspective effect-airbnb">
    <div class="container">
        <div class="wrapper"><!-- wrapper needed for scroll -->
            <!-- ... -->
        </div><!-- wrapper -->
    </div><!-- /container -->
    <nav class="outer-nav left vertical">
        <!-- ... -->
    </nav>
</div><!-- /perspective -->
  1. Стили CSS
/* Effect Move Left */
.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);
}

/* Fallback */
.no-csstransforms3d .effect-moveleft.animate .container {
    left: -75%;
}

/* Navigation */
.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;
}
  1. Ну а теперь непосредственно меню — Разметка HTML
<nav class="outer-nav left vertical">
    <a href="#" class="icon-home">Home</a>
    <a href="#" class="icon-news">News</a>
    <a href="#" class="icon-image">Images</a>
    <a href="#" class="icon-upload">Uploads</a>
    <a href="#" class="icon-star">Favorites</a>
    <a href="#" class="icon-mail">Messages</a>
    <a href="#" class="icon-lock">Security</a>
</nav>

Более детальный разбор скрипта вы можете посмотреть в исходниках.

Скриншоты эффектов:

 

Эффект: Airbnb

Эффект: Move Left

Эффект: Rotate Left

Эффект: Move Down

Эффект: Rotate Top

Эффект: Lay down

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.