多种头部展示效果

Header Effects

我们添加一个特殊的类的部分将触发类变化:

数据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%' } );} );

jquery向下滚动头部效果

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

未经允许不得转载： ICode联盟 » 插件特效 » jquery向下滚动头部效果

猜你喜欢更多»

项目推荐更多»

[开源]基于 Vue、Datav、Echart 框架的数据大屏项目，可自由替换 (1)

[开源]一套企业级微服务框架、微服务能力开放平台，功能强大 (0)

[开源]免费开源的流程设计器，开箱即用，助力流程开发使用更简单 (0)

[开源]MIT开源协议，前后端分离、美观大方后台通配权限管理系统 (1)

[开源]一款终端仿真软件，支持多种后端协议，无依赖跨平台使用 (0)