onepage-scroll
Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin
A jQuery plugin that converts a normal website into a full-screen section-snapping experience, users flip between sections like slides, with touch swipe, keyboard navigation, and dot indicators built in. No build step required.
One Page Scroll is a jQuery plugin that turns a normal website into one where users move through full-screen sections one at a time, like flipping slides. Instead of a continuous scroll, each section snaps into view as its own page. The effect is similar to how Apple presented the iPhone 5S on its website, which is the direct inspiration mentioned in the README.
To use it, you add the plugin files to your HTML page alongside jQuery, structure your content into sections inside a container element, then call a single JavaScript function on that container. From that point the plugin takes over the scrolling behavior. It works on both desktop and mobile, supporting touch swipe gestures on phones in addition to mouse wheel scrolling.
You can adjust several settings when activating the plugin. These include how fast the animation runs, what easing curve it uses, whether a dot-style navigation appears on the side, and whether the browser URL updates as the user moves between sections. There is also an option to loop from the last section back to the first, a keyboard navigation toggle, and a fallback setting that reverts to normal scrolling on narrow screens.
The plugin exposes a few methods you can call from your own code, such as moving up one section, moving down one section, or jumping directly to a specific section by number. It also provides two callback functions: one that fires just before a section transition starts, and one that fires after the animation finishes. These let you trigger other behavior tied to which section the user is on.
Keyboard navigation is built in. The arrow keys, Page Up, Page Down, Spacebar, Home, and End keys all work out of the box. The README is straightforward, and the plugin is a focused, single-purpose tool with no server-side component or build step required.
Where it fits
- Build a presentation-style landing page where each section fills the entire screen
- Add swipe-to-navigate behavior to a mobile-friendly marketing or portfolio site
- Create an Apple-style product showcase that scrolls section-by-section with smooth animations