29 июн 2016
Анимация для навигации сайта
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Анимация для навигации сайта

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Анимация для навигации сайта

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



В демонстрации мы рассмотрим несколько вариантов анимации. Сразу следует отметить, что структура кода в демо очень специфична, так как нам нужно было отобразить все эффекты на одной странице. В принципе, нам понадобится боковой блок, который будет появляться в зависимости от выбранного эффекта. И так, давайте приступим.

Шаг 1. HTML

Структура достаточно простая и выглядит следующим образом:

<div id="st-container" class="st-container">

<!-- контейнер для контента -->
<div class="st-pusher">

<nav class="st-menu st-effect-1" id="menu-1">
<!-- сайдбар -->
</nav>

<div class="st-content">
<div class="st-content-inner">
<!-- контент -->
</div>
</div>

</div>

</div>


Также мы будем применять альтернативную разметку.

<div id="st-container" class="st-container">

<nav class="st-menu st-effect-1" id="menu-1">
<!-- сайдбар -->
</nav>

<!-- контэйнер -->
<div class="st-pusher">

<div class="st-content">
<div class="st-content-inner">
</div>
</div>

</div>

</div>


С разметкой мы разобрались, теперь давайте перейдем к следующему шагу.

Шаг 2. CSS

Выставляем определённые размеры основному контейнеру, а внутренний блок разворачиваем чтобы создать 3D эффект:

.st-effect-7.st-container {
perspective: 1500px;
perspective-origin: 0% 50%;
}

.st-effect-7 .st-pusher {
transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-pusher {
transform: translate3d(300px, 0, 0);
}

.st-effect-7.st-menu {
transform: translate3d(-100%, 0, 0) rotateY(-90deg);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}

.st-effect-7.st-menu-open .st-effect-7.st-menu {
visibility: visible;
transform: translate3d(-100%, 0, 0) rotateY(0deg);
}


Тут используем свойство visibility только по той причине, что у нас много примеров на одной странице. Если у вас будет только один боковой блок, то вам не нужно свойству visibility выставлять значение visible.

Вот и все. Готово!

Скачивание файлов доступно только зарегистрированным пользователям









Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.