全屏滚动插件 - Scrollify.js

又一个推荐的全屏滚动插件：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方法