Автор

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

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


 

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

 

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

 

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

 

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

 

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

 

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

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


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

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


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close