Автор

Интересная анимация для навигации сайта

Интересная анимация для навигации сайта


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 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.

 

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

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеJS

Интересная анимация для навигации сайта

Слайдер с различными эффектами переходов (7 различных эффектов, в том числе 3D). Адаптер представляет собой легкий контент-слайдер, простой интерфейс для разработчиков и создания 2D или 3D слайд анимации переходов.
Добавлена поддержка 3D для webkit и Mozilla, всех других браузерах будет запасной вариант изящно простой fade перехода при использовании 3D-эффекты.
Все 2D переходы между слайдами были протестированы в IE6+, и всех других современных браузерах.


Интересная анимация для навигации сайта

Профессиональный веб-дизайн не обходится без создания цветовой схемы. Во всемирной паутине существует множество инструментов для достижения цветовой «нирваны». Кажется, что они совершенно разные, но многие из них – всего лишь измененные версии более популярных и полезных инструментов.


Интересная анимация для навигации сайта

Вопрос: почему мало создать сайт и разместить его адрес на POS-материалах?

Я создал сайт, потратил кучу денег на его «раскрутку», разместив везде его адрес. Почему же я до сих пор беден?!

Больной вопрос, который задают многие клиенты. Самое смешное, что они действительно искренне недоумевают, почему же столь успешный (в задумке) проект до сих пор не начинает работать. И главное, что этот клиент не из тех, кто любит строить воздушные замки и воплощать в жизнь свои самые смелые фантазии, а самый, что ни на есть трудоголик, который даже во сне посредством и благодаря своей неутомимости в работе и преданности делу способен вывести свою алхимическую «формулу бизнес-счастья и commerce-изобилия». Итак, возьмем на себя смелость и проведем небольшую работу по «препарированию» (простите за черный юмор) данной проблемы.


Интересная анимация для навигации сайта

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


87 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close