Сегодня мы хотим дать вам кое-какое вдохновение на создание анимированных шапок, чтобы вы могли видеть, какие эффекты можно использовать для модернизации вашего сайта.
Пожалуйста, учтите: эти эффекты будут работать только в тех браузерах, которые имеют поддержку соответствующих CSS-свойств! Только в современных браузерах!
Демо-страница с эффектами предназначена только для вдохновения, и мы воспользовались техникой, которая включает в себя изменения классов состояния (states) шапки сайта, которые, конечно же, можно изменять по собственному усмотрению в зависимости от того, какой вам понадобится эффект. Важно понимать, что состояния зависят друг от друга, то есть изменение класса А на класс Б может быть уместным (при помощи переходов), а переход от А к классу В может не дать желаемого результата. Так что, порядок эффектов, приведенный на странице, имеет значение.
Также следует учитывать, что слишком быстрая прокрутка может вызвать нежелательный скачок, подразумевающий вышеуказанный переход от класса А к классу В.
В демо мы использовали великолепный jQuery-плагин Waypoints от Caleb Troughton.
Шапка сайта состоит из нескольких частей для отображения всех эффектов. Здесь имеется оболочка с перспективой – для передней и задней стороны (которая используется для трехмерного вращения):
<header id="ha-header" class="ha-header ha-header-large">
<div class="ha-header-perspective">
<div class="ha-header-front">
<h1><span>Header Effects</span></h1>
<nav>
<a>‹ Previous Demo</a>
<a>Something</a>
<a>Anything</a>
<a>Back to the article</a>
</nav>
</div>
<div class="ha-header-bottom">
<nav>
<a>Dalliance</a>
<a>Inglenook</a>
<a>Lagniappe</a>
<a>Mellifluous</a>
<a>Erstwhile</a>
<a>Wafture</a>
<a>Serendipity</a>
<a>Love</a>
</nav>
</div>
</div>
</header>
Мы добавили специальный класс в разделы, который позволяет нам запускать изменения классов:
<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-large">
<!-- ... -->
</section>
Атрибуты данных используются для выставления нужных классов в зависимости от того, в каком направлении производится прокрутка. В нашем демо атрибут данных animate-up содержит класс для предыдущего атрибута данных animate-down.
В качестве примера класса состояния можно выделить “rotate”:
.ha-header-rotate {
height: 220px;
top: 50px;
padding-left: 50px;
padding-right: 50px;
}
.ha-header-rotate .ha-header-front {
transform: translateY(-100%) rotateX(90deg);
}
.ha-header-rotate .ha-header-bottom {
top: 50%;
transition: transform 0.5s;
transform: rotateX(0deg) translateY(-100%);
}
Классы состояния применяются к элементу шапки, а уже затем мы можем определить некоторые изменения для дочерних элементов.
При помощи плагина Waypoints, мы просто добавляем соответствующие классы:
var $head = $( '#ha-header' );
$( '.ha-waypoint' ).each( function(i) {
var $el = $( this ),
animClassDown = $el.data( 'animateDown' ),
animClassUp = $el.data( 'animateUp' );
$el.waypoint( function( direction ) {
if( direction === 'down' && animClassDown ) {
$head.attr('class', 'ha-header ' + animClassDown);
}
else if( direction === 'up' && animClassUp ){
$head.attr('class', 'ha-header ' + animClassUp);
}
}, { offset: '100%' } );
} );
Надеемся, что вам понравились данные эффекты, и вы вдохновились для создания собственных проектов с использованием анимированной шапки сайта.
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.