jquery向下滚动头部效果

jquery向下滚动头部效果260
多种头部展示效果
<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>
数据atrributes用于设置正确的课程取决于哪个方向滚动。在我们的演示animate-up数据属性包含的类前animate-down。 一个状态类的一个例子是“旋转”:
.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%);
}
路径点插件的帮助下,只需添加相应的类:
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%' } );
} );

也许你还喜欢