0
Welcome Guest! Login
0 items Join Now

Supra: Full Page Scroll Atom

Your Guide to Using the Supra Theme for Grav


Introduction

One of the most requested features by the RocketTheme community for a new theme has been full page scrolling. With this feature, you can modify your visitor's experience with your content by enabling or disabling a full-page section-by-section scroll.

The real beauty behind the Full Page Scrolling atom is that it enables you to set a breakpoint where scrolling goes from a normal smooth scroll to the full page experience. That way, mobile users can still experience a natural user environment while desktop users enjoy the visual experience this atom has to offer.

Full Page Scroller is powered by FullPage.js.

Setup

To set up the atom, simply navigate to the Page Settings tab in the outline you wish to apply full page scrolling to and drag-and-drop the Full Page Scrolling atom into the white Atoms bar. This will activate the atom for the outline.

Next, you can access the atom's settings by selecting the cogwheel icon.

Setting Description
Custom Section Selector Class Defines the selector used for the atom sections.
Custom Slide Selector Class Defines the selector used for the atom slides.
Responsive Width (default 0) A normal scroll will be used under the defined width in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the atom will scroll like a normal site.
Responsive Height (default 0) A normal scroll will be used under the defined height in pixels. A class fp-responsive is added to the body tag in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's height is less than 900 the atom will scroll like a normal site.

You will notice in the Home layout preset that sections have a section CSS class applied. This enables Full Page Scrolling to work with these sections. A good rule of thumb is if you are using the Full Page Scrolling atom in an outline, apply that CSS class to any sections you use in the outline you'd like to have that section-by-section scrolling apply to.


Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.