Анимация меню при прокрутке страницы

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

Эта статья будет включать все и сразу. Для того, чтобы использовать демо, необходимо подключить плагин  jQuery Waypoints

• Демо
• Скачать

Меню состоит из нескольких частей для демонстрации всех эффектов: front, bottom.

<header id="ha-header" class="ha-header ha-header-large">
    <div class="ha-header-perspective">
        <div class="ha-header-front">
            <h1><span>Главное меню</span></h1>
            <nav>
                <a href="http://blog.n1dev.ru/">&lsaquo; Главная страница</a>
                <a>Кнопочка</a>
                <a>Нажми меня</a>
                <a href="#">Вернуться к статье</a>
            </nav>
        </div>
        <div class="ha-header-bottom">
            <nav>
                <a href="http://blog.n1dev.ru/category/html-i-css/" title="View all posts filed under HTML и CSS">HTML и CSS</a>
                <a href="http://blog.n1dev.ru/category/%d0%b4%d0%b8%d0%b7%d0%b0%d0%b9%d0%bd/" title="View all posts filed under Дизайн">Дизайн</a>
                <a href="http://blog.n1dev.ru/category/obo-vsem/" title="View all posts filed under Обо всем">Обо всем</a>
                <a href="http://blog.n1dev.ru/category/seo/" title="View all posts filed under SEO">SEO</a>
                <a href="http://blog.n1dev.ru/category/cms/" title="View all posts filed under CMS">CMS</a>
                <a href="http://blog.n1dev.ru/category/php/" title="View all posts filed under PHP">PHP</a>
            </nav>
        </div>
    </div>
</header>

Добавляем секции, где будет располагаться наш контент и указываем в них класс, который и вызовет изменение меню:

<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-large">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-hide" data-animate-up="ha-header-small">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-show" data-animate-up="ha-header-hide">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-subshow" data-animate-up="ha-header-show">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-show" data-animate-up="ha-header-subshow">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-shrink" data-animate-up="ha-header-show">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-rotateBack" data-animate-up="ha-header-shrink">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-rotateBack" data-animate-up="ha-header-rotate">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-color" data-animate-up="ha-header-rotateBack">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-small" data-animate-up="ha-header-color">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-box" data-animate-up="ha-header-small">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-fullscreen" data-animate-up="ha-header-box">
    <!-- ... -->
</section>
<section class="ha-waypoint" data-animate-down="ha-header-subfullscreen" data-animate-up="ha-header-fullscreen">
    <!-- ... -->
</section>

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

Не буду выводить все CSS стили анимации сюда, только пример:

.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%);
}

С помощью подключенного нами ранее плагина jQuery 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%' } );
} );

Приятного пользования!
Источник