基于JQ的全屏滚屏插件,可加CSS3过场动画,可自定义动画

基于Jquery的页面滚动到相应位置运行css3过场动画.zip基于JQ的全屏滚屏插件,可加CSS3过场动画,可自定义动画,独立式插件,无冗余,放心使用。

基于animate.min.css的CSS3过场动画,使用灵活,分体式升级。


滚屏特效见到最多的就是推广页面(落地页),一屏一屏的给用户展示信息,避免了用户一直滑滚轮的操作,并且信息可以分类集中的展示给用户。

这个滚屏插件是基于JQ的,可以满足基本的需求,也可以配合《基于Jquery的页面滚动到相应位置运行css3过场动画,独立式插件,无冗余》这个插件使用。当然你也可以整合到自己系统上面,减少一点加载。


图片展示:

72691573802672.png


插件使用:

$(dom).xswitch(object)
//object为json对象

参数说明:

object.section:滚屏的DOM,默认“.section”

object.page:分屏导航的类,方便自定义CSS,默认“.xs_nav”

object.active:分屏导航当前高亮的类名,默认“active”

object.easing:过场动画模式,遵循CSS3的transition,默认“ease”

object.duration:过场动画速度,单位毫秒,默认“500”

object.loop:是否循环滚屏,默认false

object.pagination:是否开启分屏导航,默认false

object.keyboard:是否开启按键控制,↑←为上一屏,↓→为下一屏,默认true

object.direction:vertical表示竖屏,其他表示横屏;默认“vertical”。如配合scrollAnim使用,请保持两个参数一致

object.callback:回调函数(方法),传参数是当前屏的索引(从0开始)



PS:请使用DIV包含住所有分屏的item,否则translate3d是导致分屏导航fixed失效


0 位网友评论:

欢迎 来评论

请填写验证码

为您推荐