Fullpage Scrolling Stack


Create Beautiful Full Browser Screen Scrolling Websites

The Fullpage set of stacks let you easily create beautiful web pages that users can scroll through, vertically as well as horizontally.

Here's the demo so you can quickly see what it's about.

You can use images, short video clips or use solid colours as backgrounds. Each screen can be as simple or as sophisticated as you like.

Features:

  • - It's easy to use and you'll get a page up really fast.
  • - Use images, videos or solid colours as backgrounds.
  • - Create vertical-scrolling or horizontal-scrolling slides.
  • - Great for landing pages.
  • - Fully responsive if used with a responsive theme. If you're not using a responsive theme, it tries its best to be responsive.
  • - Falls back to showing background images/colours on devices (mobile) that don't support displaying videos as backgrounds.
  • - Supports touches so you can swipe up and down, or left and right on mobile devices.
  • - Autogenerated top menu (optional).
  • - Footer support.

If you want to quickly deploy Fullstack, you don't have to bother with most of the options. The only ones you may want to pay attention to is the "BG Image" and "BG Color" in the Fullstack Content stack.

The Fullpage Stack

Options

Scroll Duration: this controls how long the scrolling animation lasts. The scrolling animation comes on when you navigate from slide to slide.

Autoplay Vert/Hori slides: these options will cause the web page to scroll vertically and horizontally (if Fullpage Horizontal Slides are present).

Show Menu: this will display an automatically-generated top-menu to be shown. This menu will display links to the other pages in your RapidWeaver project.

Show Footer: when checked, this will let you display a footer on every slide on the page.

Show Vert. Pager: when checked, vertically-scrolling slides will show a left or right pager. If you are also using Horizontal slides, then don't check this.

Show Hori. Pager: when checked, horizontal-scrolling slides will show a top or bottom pager.


The Fullpage Content Stack

Here you can define if you want to use a background image or a solid color for your slide.


The Fullpage Horizontal Slide

Horizontal slides only have a background image option. If this isn't used, then the enclosing Fullpage Content stack's background setting is used.

To create horizontal slides, first drag in a Fullpage Content Stack onto the page. Then drag one or more Fullpage Horizontal Slide stacks into this empty Fullpage Content Stack.


The Fullpage Video Slide

Drag a Fullpage Video Slide stack into a Fullpage Content stack to use it.

It supports MP4 and WebM videos. Just enter the URL of an MP4 video (and optionally, WebM video URL) into the fields.

Recommended: use a very short clip. Audio is not required.

Note: Horizontal slides won't work with video backgrounds. Instead use an image or use a colour.


How To Link To A Slide

Once you tick that, another option called "Anchors" will be shown. In here, you have to enter the names of each Page of your Fullpage stack, like this:

'firstPage', 'secondPage', 'thirdPage'

If you have, for example, 5 pages, then you have to enter exactly 5 unique names there, no more, no less.

Once done, you can link to any page. For example, to link to secondPage, the anchor will be: #secondPage. You can use the standard RapidWeaver/Stacks way of creating links to do this.

Notes

  • - Falls back to showing your background images/colours on Mobile devices and Firefox.
  • - Horizontal slides do not display videos as backgrounds. They will display either images or solid colours as their backgrounds.

Requirements

  • - RapidWeaver
  • - Stacks 2, 3 and 4
  • - Uses Javascript to show and hide contents

Stacks . Images & Videos . Social . Lightboxes . Layout . Publishing . Utilities .
Bundles .