Overview
The FullPage component creates a “screen-by-screen” scroll experience. You split the page into sections, and the component handles switching between them. Optionally, you can add bullets for navigation and choose a transition effect.
Component location
Files are located in src/components/layout/fullpage.
Inside you’ll find:
- JS file with the full-page scroll logic.
- HTML example snippet.
- SCSS file for styling and effects.
Basic usage
Add data-anim-fullpage to the wrapper and
data-anim-fullpage-section to each section.
<div data-anim-fullpage class="some-class">
<div data-anim-fullpage-section class="some-class__section"> ... </div>
<div data-anim-fullpage-section class="some-class__section"> ... </div>
</div>Bullets navigation
To add bullets (section switch buttons), add the attribute
data-anim-fullpage-bullets to the FullPage wrapper.
<div data-anim-fullpage data-anim-fullpage-bullets class="some-class">
<div data-anim-fullpage-section class="some-class__section"> ... </div>
<div data-anim-fullpage-section class="some-class__section"> ... </div>
</div>Switch effects
To change the transition effect, add data-anim-fullpage-effect to the wrapper.
Supported values: slider (default), fade, cards.
<div data-anim-fullpage data-anim-fullpage-effect="fade" class="some-class">
<div data-anim-fullpage-section class="some-class__section"> ... </div>
<div data-anim-fullpage-section class="some-class__section"> ... </div>
</div>Download
Build full-screen scrolling pages with sections, bullets navigation, and smooth effects. Download the template and start faster.