全屏滚动插件 - Scrollify.js

全屏滚动插件 - Scrollify.js

更新: 2015-12-10

阅读:1214

开源:GitHub

又一个推荐的全屏滚动插件:Scrollify.js。该插件小巧,调用灵活。支持自定义锚链接、设置过度效果、偏移、是否显示滚动条、回调函数等。

现在越来越多的网站使用类似全屏幻灯片那样的展示方式,并通过垂直滚动来实现切换,从而实现漂亮的视觉效果,一看就能吸引用户。因此,不凡试试全屏滚动的插件Scrollify

使用方法

1,引入JS文件

<script src="js/jquery.min.js"></script>
<script src="js/jquery.scrollify.min.js"></script>

2,HTML结构

<section>...</section>
<section>...</section>
<section>...</section>

3,JS配置

$.scrollify({
		section : "section",
		sectionName : "section-name",
		easing: "easeOutExpo",
		scrollSpeed: 1100,
		offset : 0,
		scrollbars: true,
		before:function() {},
		after:function() {},
		afterResize:function() {}
});

还能更简单的:

$(function() {
	$.scrollify({
		section : "section",
	});
});

参数

  • section:选择器
  • sectionName:自定义锚链接,需要通过 HTML data 属性 data-section-name 指定,如 data-section-name=”home”
  • easing:过度效果
  • offset:偏移值
  • scrollbars:是否显示滚动条
  • before:滚动前的回调函数
  • after:滚动后的回调函数
  • afterResize:当调整浏览器窗口的大小时的回调函数

方法

  • $.scrollify.move():滚动到#name节点
    $.scrollify.move('#name');
  • $.scrollify.instantMove():瞬间切到#name节点,无动画效果
    $.scrollify.instantMove('#name');
  • $.scrollify.next();:下一个滚屏
  • $.scrollify.previous();:上一个滚屏
  • $.scrollify.instantNext();:效果参考instantMove方法
  • $.scrollify.instantPrevious();:效果参考instantMove方法