Автор

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

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


 

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

 

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

 

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

 

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

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

Сегодня мы рассмотрим еще один вариант слайдеров для сайта, все это имеет вид автоматического аккордеона с возможностью подписи изображений, а так же с возможностью выбора и нумерации слайда. Для всего этого мы будем использовать liteAccordion - небольшой плагин jQuery для быстрого создания горизонтального аккордеона. Он имеет размер ~1.4kb (в минимизированном варианте) и может выводить любые элементы HTML (изображения, тексты, видео, Flash..). Давайте посмотрим какой все это имеет вид..


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

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


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

Эта ссылка «Back to top» позволяет пользователям плавно перемещаться вверх по странице. Это небольшая деталь, которая улучшает навигацию на веб-сайте с длинными страницами.


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

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close