Автор

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

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


 

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

 

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

 

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

 

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close