Hace tiempo estuve buscando cómo hacer una página web en vertical como un blog pero con scroll desde el menú, es decir, que haciendo click en un botón del menú se desplazara en vertical hacia la página a la que hacía referencia, y he aquí varios ejemplos gratuitos con el código sobre Page Scroll efects.
1.- One Page scroll
One Page Scroll, a jQuery plugin, simplifies creating such websites so easy.It requires minimal setup, just create your HTML structure, call the function and you are ready-to-go.
Optionally, the easing function, its speed and looping behavior can be set too. And, it has support for SEO-friendly URLs for each page.
Scrolld.js is a unique open source plugin for jQuery. Scrolld.js provides a method for highly precise scrolling for pixel-perfect layouts and navigation using real-time updated data values. With Scrolld.js your scrolling to items will always be exact and will always provide the best user experience. Scrolld.js is specifically designed to support responsive designs and turns navigating long pages into a simple task. Scrolld.js is intended for easy use and is fully deployable within minutes.
3.- Animate Scroll
AnimateScroll is a simple jQuery plugin for adding easing effects to scrolling. It is possible to customize the style of scrolling (30+ scrolling effects) and scroll speed. There is also a “padding” option where we can manipulate “the position where the scrolling ends”. The plugin is not limited to the full body of the page but a specific wrapper element can be targeted too.
jInvertScroll is a jQuery plugin that manipulates the default scrolling behavior and forces a horizontal scroll. It also eases creating parallax effects with the onScroll callback where we can decide to animate any element. The plugin is lightweight less than 1 kb and works with almost no setup. Adding a specific class to wrapper elements and calling a JS function i senough.
Smint is a simple jQuery plugin that helps with the navigation on one page style websites. It has 2 main elements, a sticky navigation bar that stays at the top of the page while you scroll down and menu buttons that automatically scroll the page to the section you clicked on.
SMINT is a simple plugin, so only has an option for how fast the page scrolls. The default speed is 500 (half a second) but you can now set that to be whatever you like. The download comes with demo included so feel free to use that as a staring template for your own one page website.
6.- jQuery Arbitrary Anchor Plugin
jQuery Arbitrary Anchor Plugin allows the page to scroll to any arbitrary object on the page based on jQuery/CSS selector. you can easily create useful and neat dynamic anchor scrolling by simply adding a jQuery/CSS selector after the hash (#) in your page’s URL. This plugin extends the normal anchor functionality, that is, an anchor tag with a name value attribute will still get scrolled to as normal. The same goes for an element with an ID which matches the hash. This little plugin will take care of everything else.
7.- jQuery Scroll Path
jQuery Scroll Path is a plugin that lets you define your own custom scroll path. The plugin uses canvas flavored syntax for drawing paths, using the methods moveTo, lineTo and arc. To help with getting the path right, a canvas overlay with the path can be enabled when initiating the plugin.
Scrolling can be done with the mousewheel, up/down arrow keys and spacebar. The spacebar scrolls faster than the arrow keys, and holding shift while pressing space will scroll backwards. A custom scrollbar is also included, which allows click and drag scrolling. The scrollbar is enabled by default.
Posted by GAVIN