One Page Scroll is a responsive jQuery plug-in for full screen scrolling of a single Page. Its effect is somewhat like fullpage. js, but this plug-in is another one. It can easily create a dynamic and responsive rolling effect page, which is more suitable for single-page thematic sites, such: apple's iPhone 5S such a website, can greatly improve the user experience, but also enhance their own brand image. Of course, One Page Scroll is based on jquery and must be 1.9.0 or later. It supports modern browsers and IE8 or later versions.
One Page Scroll responsive single Page full screen scrolling jQuery plug-in
Plugin requirements
JQuery (1.9.0 or later)
Note: jQuery 1.9.0 later is strongly recommended because the use of jQuery is less than 1.8.3 jquery. Onepage-scroll.js together, the original is a hash-based XSS vulnerabiliry.
See: http://jsfiddle.net/33WJx/
Usage
Introduce the style files and script files required by the plug-in.
<Link href='onepage-scroll.css 'rel = 'stylesheet 'type = 'text/css'>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js"> </script>
<Script type = "text/javascript" src = "jquery. Onepage-scroll.js"> </script>
Compile HTML code
A rolling page allows you to change your website to a page rolling website, allowing users to scroll one page. This is perfect for creating a website and you want to present it to the audience. For example, Apple's iPhone 5S website uses the same technology.
To your website, only the latest jquerydatabase and jquery.onepage-scroll.js are included. The calling function of onepage-scroll.css to your file is as follows:
<Body>
...
<Div class = "main">
<Section>... </section>
<Section>... </section>
...
</Div>
...
</Body>
"Main" must be lower than the first-level body tag to make it work on the full page. The following figure shows how to activate the plug-in:
$ (". Main"). onepage_scroll ({
SectionContainer: "section", // customizable selector
Easing: "Running", // receives CSS3 animation types: "Running", "linear", "running-in", "running-out ", "Audio-in-out", or even cubic besuppliers value such as "cubic-besuppliers (0.175, 0.885, 0.420, 1.310 )"
AnimationTime: 1000, // Animation time of each section
Pagination: true, // whether the page is displayed
UpdateURL: false, // whether to update the URL as the user scrolls
BeforeMove: function (index) {}, // callback function before page scrolling
AfterMove: function (index) {}, // callback function after page scrolling
Loop: false, // page scrolling cyclically
Keyboard: true, // whether to activate keyboard control
ResponsiveFallback: false, // after the browser size is changed, it returns to normal scrolling. For example, if the design width is smaller than 600px, it returns to normal scrolling.
Direction: "vertical" // scroll direction, options: "vertical" and "horizontal". Default value: "vertical ".
});
That's it. Now, your website should work the same way for the Apple iPhone 5S website. You should be able to brush up/down to watch your website on your mobile phone.
Keyboard shortcuts
You can trigger page move with hotkeys as well:
Up arrow/Page Up
Pressing the up arrow or the page up key allows you to move the page up by one.
Down arrow/Page Donw
Pressing the down arrow or the page down key allows you to move the page down by one.
Spacebar
Pressing the space key allows you to move the page down by one.
Home
Pressing the home key brings you back to the first page.
End
Pressing the end key brings you to the last page.
Bind event
You can also trigger Web programming and Mobile:
$. Fn. moveUp ()
This method allows you to move one of the web pages. This action is equivalent to Flushing up/down.
$ (". Main"). moveUp ();
$. Fn. moveDown ()
This method allows you to move the next page. This action is equivalent to rolling/sliding.
$ (". Main"). moveDown ();
$. Fn. moveTo (page_index)
This method allows you to move to the specified page index program.
$ (". Main"). moveTo (3 );
Callbacks
You can use callbacks to perform actions before or after the page move.
BeforeMove (current_page_index)
This callback gets called before the plugin performs its move.
$ (". Main"). onepage_scroll ({
BeforeMove: function (index ){
...
}
});
AfterMove (next_page_index)
This callback gets called after the move animation was completed Med.
$ (". Main"). onepage_scroll ({
AfterMove: function (index ){
...
}
});
If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.
Plug-in features
(No) show the right dot Project navigation
(No) show named anchor
Loop/disable loop
Rollback (rolling with browser)/specify Rollback
Supports keyboard control, left and right/Page Up/Page Donw/Home/End, etc.
Horizontal/horizontal scrolling
Callback function
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
