How do I disable the pagination dots in One Page Scroll?

Set the 'pagination' option to false when initializing the plugin. This removes the visual indicators while keeping other navigation methods like keyboard and swipe controls active, as shown in the configuration example.

One Page Scroll vs FullPage.js – which is better?

One Page Scroll is lighter and simpler, ideal for basic jQuery sites with minimal setup, while FullPage.js offers more features like parallax effects and extensions but is heavier. Choose based on your project's complexity and dependency preferences.

Can I use One Page Scroll with React?

Yes, but it requires integrating jQuery into your React project, which can be cumbersome and may lead to conflicts. Consider using React-specific libraries for similar effects to avoid dependency issues and ensure better performance.

How do I make One Page Scroll responsive for mobile?

Use the responsiveFallback option to define a width threshold (e.g., 600px) where it reverts to normal scrolling. This ensures better usability on smaller screens, as mentioned in the plugin's configuration settings.

What keyboard shortcuts does One Page Scroll support?

It supports up/down arrows, page up/down, spacebar to move down, and home/end keys to jump to first/last sections, as detailed in the README's keyboard shortcuts section for enhanced navigation.

How can I add custom animations to One Page Scroll?

Use the easing option with CSS3 easing functions like 'ease-in-out' or cubic-bezier values, and adjust animationTime for timing. The README provides examples for smooth, customizable transitions.

Open-Awesome

onepage-scroll

JavaScript1.3.1

A jQuery plugin for creating full-screen, one-page-at-a-time scrolling websites similar to Apple's iPhone 5S site.

Visit Website GitHub

9.5k stars2.0k forks0 contributors

What is onepage-scroll?

One Page Scroll is a lightweight jQuery plugin that enables developers to create full-screen, one-section-at-a-time scrolling websites. It mimics the smooth, immersive scrolling effect famously used on Apple's iPhone 5S product page, allowing for engaging presentations or storytelling websites.

Target Audience

Web developers and designers looking to create visually compelling single-page websites, product showcases, or portfolio presentations with minimal JavaScript overhead.

Value Proposition

It offers an easy-to-implement solution with extensive customization options, including animation easing, keyboard controls, and mobile swipe support, without requiring complex frameworks or heavy dependencies.

Overview

Create an Apple-like one page scroller website (iPhone 5S website) with One Page Scroll plugin

Use Cases

Best For

Creating product launch websites with immersive scrolling effects
Building portfolio or presentation sites with full-screen sections
Developing storytelling or narrative websites with smooth transitions
Implementing Apple-style scrolling interfaces without custom code
Adding touch-friendly navigation to single-page websites
Enhancing landing pages with animated section-based scrolling

Not Ideal For

Projects avoiding jQuery or built with modern frameworks like React or Vue
Websites requiring strict WCAG accessibility compliance and built-in ARIA support
Complex single-page applications with dynamic content updates and state management
Teams preferring lightweight, vanilla JavaScript solutions over plugin dependencies

Pros & Cons

Pros

Easy Setup

From the README, it only requires including jQuery, the plugin JS, and CSS, then calling a function with minimal configuration options, making it quick to implement.

Flexible Animation Controls

Supports CSS3 easing functions and adjustable animation timing, allowing smooth custom transitions as demonstrated in the demo with options like 'ease-in-out'.

Multiple Navigation Methods

Includes keyboard shortcuts, swipe gestures for mobile, and programmable methods like moveTo(), providing versatile user interaction without extra code.

Responsive Fallback

The responsiveFallback option lets developers define a width threshold to revert to normal scrolling on smaller screens, enhancing mobile compatibility as noted in the compatibility section.

Cons

jQuery Dependency

Requires jQuery 1.9.0 or later, adding bloat and limiting use in projects that avoid jQuery for performance or modern stack reasons, as emphasized in the README's requirement note.

Accessibility Gaps

The documentation doesn't address ARIA roles or screen reader support, making it less suitable for accessible web development without manual enhancements, which could violate accessibility standards.

Outdated Technology

As a jQuery plugin, it may not align with current web development trends focused on framework-based or vanilla JS solutions, and updates might be infrequent, with the last version being 1.3.1.

Frequently Asked Questions

Related Projects

fullPage

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

Stars35,422

Forks7,117

Last commit4 months ago

skrollr

Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

Stars18,419

Forks3,399

Last commit8 years ago

parallax

Parallax Engine that reacts to the orientation of a smart device

Stars16,582

Forks2,093

Last commit2 years ago

iscroll

Smooth scrolling for the web

Stars12,813

Forks3,729

Last commit7 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub