how to use
Scrollify need jQuery 1.6+ and animation easing plug with buffer to achieve. HTML basic structure is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>scrollify</title>
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<![endif]-->
<script src="jquery.js"></script>
<script src="jquery.easing.min.js"></script>
<script src="jquery.scrollify.min.js"></script>
<script>
$(function() {
$.scrollify({
section : "section",
});
});
</script>
</head>
<body>
<section></section>
<section></section>
</body>
</html>
Basic configuration
The following is the default configuration of scrollify:
$.scrollify({
section : "section",
sectionName : "section-name",
easing: "easeOutExpo",
scrollSpeed: 1100,
offset : 0,
scrollbars: true,
before:function() {},
after:function() {}
});
Option Description
section: node section selector.
sectionName: each node corresponds to a section of data attributes.
easing: the definition of a buffer animation.
offset: Offset defines each color tion node.
scrollbars: whether to display the scroll bar.
before: callback, before rolling start trigger.
after: After the callback function, scroll completion trigger.
other
Scrollify also provides a method call, such as:
$.scrollify("move","#name");
The above code can be rolled directly into the #name nodes.
Scrollify plug-in supports IE7 +, as well as most modern browsers.