Автор

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

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


 

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

 

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

 

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

 

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

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

Интересные плагины, которые вы сможете использовать при создании навигации в ваших проектах.

Представляю вашему вниманию jQuery, Mootools, CSS меню, выполненные в различных вариантах и стилевых исполнениях: вертикальные и горизонтальные меню,  меню c анимированными JavaScript эффектами, круговые меню, графические меню, прокручивающиеся меню, меню с CSS3 эффектами, фиксированные навигационные панели, всегда находящиеся в поле видимости и другие примеры навигации.

 


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

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


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

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


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close