explaingit

peachananr/onepage-scroll

9,476JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((repo))
    Setup
      Add jQuery
      Add plugin files
      One function call
    Navigation
      Mouse wheel
      Touch swipe
      Keyboard arrows
      Dot indicators
    Options
      Animation speed
      Easing curve
      Loop sections
      URL updates
    Callbacks
      Before transition
      After transition
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a presentation-style landing page where each section fills the entire screen

USE CASE 2

Add swipe-to-navigate behavior to a mobile-friendly marketing or portfolio site

USE CASE 3

Create an Apple-style product showcase that scrolls section-by-section with smooth animations

Tech stack

JavaScriptjQuery

Getting it running

Difficulty · easy Time to first run · 5min
No license information is provided in the explanation.

In plain English

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.

Copy-paste prompts

Prompt 1
I want to add full-screen snap scrolling to my website using the onepage-scroll jQuery plugin. Show me the minimal HTML and JavaScript to get three sections working with dot navigation on the side.
Prompt 2
Using the onepage-scroll plugin, how do I make it loop from the last section back to the first and update the browser URL as the user navigates?
Prompt 3
Write a JavaScript snippet using onepage-scroll's after-move callback to trigger a CSS fade-in animation only when the user reaches section 2.
Prompt 4
How do I use the onepage-scroll plugin to jump directly to a specific section by number from a button click, and how do I disable keyboard navigation?
Open on GitHub → Explain another repo

← peachananr on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.