После небольшого перерыва мы возвращаемся к работе, сразу хочется извинится за перерывы в обновлении сайта, это связано с загруженностью администратора сайта и его работой, но тем не менее сайт жив и будет дальше обновляться. Вся команда в сборе и продолжает функционировать. И так, приступим, в сегодняшнем уроке мы рассмотрим замечательные исполнение анимации для навигации сайта с помощью переходов и трансформаций, следует отметить, что это только экспериментальный пример, он может не работать в старых браузерах.
В демонстрации мы рассмотрим несколько вариантов анимации. Сразу следует отметить, что структура кода в демо очень специфична, так как нам нужно было отобразить все эффекты на одной странице. В принципе, нам понадобится боковой блок, который будет появляться в зависимости от выбранного эффекта. И так, давайте приступим.
Шаг 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.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
