» » Use the mouse wheel or sliding gestures to browse the page node section by scrollify

 

Use the mouse wheel or sliding gestures to browse the page node section by scrollify

Author: bamboo06 on 25-11-2015, 00:11, views: 3639

5
Sometimes we need to do a single-page presentation product characteristics, while the single-page and page content is very much very long, in order to quickly locate the product characteristics node, we use user wheel events js listener, wheel slip or slide triggered by the user when using the touch screen gestures, you can navigate to the appropriate node. A jQuery plugin called Scrollify is found.


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.

Category: Javascript / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
27 September 2017 21:33

francisthomas

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Cool! It is the writing piece that i was looking for. It is well-written and contains all the info. Thanks! We are an online assignment help provider that assists student in writing buy essay. Students with assignment problem can visit our site and can get a comprehensive solution.

<
  • 2 Comments
  • 0 Articles
27 September 2017 21:46

Emilyjack

Reply
  • Group: Members
  • РRegistered date: 27.09.2017
  • Status: Currently Offline
 
Also, the basic role of an Immediately Invoked Function is to enable us to have our own particular private factors. Imagine we need an alternate shading green, and we need to store  FreshEssays.co.uk it in a variable.

<
  • 0 Comments
  • 0 Articles
5 October 2017 21:33

Heather Rosado

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
A framework setup (SC) in frameworks building characterizes the PCs, procedures, and gadgets that create the framework and its limit. All the more for the most part, the framework design is the particular meaning of the components that characterize as well as endorse what a framework is made out of. Cheap Winter Jacket

<
  • 0 Comments
  • 0 Articles
1 January 2018 21:04

Jacqueline D. Lopes

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This tutorial has made me to learn so many things on sliding gestures which is amazing. I am so much glad to get this here while looking for best writing services reviews articles on this subject. So much helpful.

<
  • 0 Comments
  • 0 Articles
30 January 2018 04:56

Chris Greenwalt

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I hope that the coding technique that you have shared, is much valuable for us to use for our dissertation writing service based website and we will be able to create something that will be valuable.

Information
Comment on the news site is possible only within (days) days from the date of publication.