Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add scroll view #3482

Merged
merged 32 commits into from Oct 12, 2023
Merged

Add scroll view #3482

merged 32 commits into from Oct 12, 2023

Conversation

hakimel
Copy link
Owner

@hakimel hakimel commented Sep 21, 2023

Reader mode lets you turn any reveal.js presentation into a tall scrollable page with slides stacked on top of each other. If there are fragments, those will be triggered through scrolling as well.

Activate it by initializing reveal.js with view config value set to "reader".

Reveal.initialize({ view: 'reader' })

New config values added for the reader mode:

// Can be used to initialize reveal.js in one of the following views:
// - print:   Render the presentation so that it can be printed to PDF
// - reader:  Show the presentation as a tall scrollable page with scroll
//            triggered animations
view: null,

// Adjusts the height of each slide in reader mode
// - full:       Each slide is as tall as the viewport
// - compact:    Slides are as small as possible, allowing multiple slides
//               to be visible in parallel on tall devices
readerLayout: 'full',

// Control how scroll snapping works in reader mode.
// - false:   	No snapping, scrolling is continuous
// - proximity:  Snap when close to a slide
// - mandatory:  Always snap to the closest slide
//
// Only applies to presentations in reader mode.
readerScrollSnap: 'mandatory',

// Enables and configure the reader mode scroll bar.
// - 'auto':    Show the scrollbar while scrolling, hide while idle
// - true:      Always show the scrollbar
// - false:     Never show the scrollbar
readerScrollbar: 'auto',

// Responsively activate the reader mode when we reach the specified
// width (in pixels)
readerActivationWidth: null,

The core functionality is in place but I'm going to try a few more ideas (like triggering auto-animations and add a vertical progress bar).

@hakimel hakimel merged commit c80b685 into master Oct 12, 2023
1 check passed
@hakimel hakimel deleted the feature/reader-mode branch October 12, 2023 12:04
@hakimel hakimel changed the title Add reader mode Add scroll view Oct 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant