Slides Scroll provides a tool set of options you can use to transform any one-page design into an exciting presentation. With Slides Scroll, users can smoothly move between sections of your page by simply scrolling their mouse or pressing the arrow keys. Plus, it’s enhanced with awesome transitions. You've probably seen this effect used on Apple's website or other popular and well-designed sites. It’s enhanced with awesome transitions (Curtain, Parallax, Zoom and 3D). These are a few demos using Slide Scroll:

• Classic Firm (Parallax)
• Creative Director (Zoom)
• Shop Techie (Parallax)
• Blog Impact (3D)
• Shop Parallax (Curtain)

▶  

Options

The Slide Scroll option is activated by the Page Options → Scroll → Type. Please select to activate the Slide Scroll method, screenshot :

• Effect: specify the transition effect from Curtain, Parallax, Zoom or 3D.
• Opacity: add opacity effect during the transition. NB. In complex page layouts this option can slow down your transitions.
• Hide Dots: hide the dots navigation.
• Show Empty Dots: display empty dots without specifying a Row Name (dots navigation label).
• Disable History: disable the Browser URL History (Hash navigation).
• Safe Padding: with the menu transparent add the menu height, when you don’t customise the row padding, as padding to your contents to avoid overlapping with the menu itself.
• Safe Padding Additional: add extra padding to the Safe Padding option.
• Menu: set the animation for the Menu. NB: When you use the Slides Scroll the default Menu behaviour is Sticky.
• Mobile: deactivate the Slide Scroll for small devices.

Requirements

To create a Slides Scroll page please follow these 2 requirements first:

• Blank Page: Slide Scroll it's supposed to work on a blank page. Breadcrumbs, sidebar, comments, navigation or other page elements must be deactivated. You can do deactivate them from the Theme Options globally or from the Page Options for a single page.
• Row Height 100%: Slide Scroll expects that any rows present in the page are full-height, please set for any rows the Height option to 100%.
• Row container: Slides Scroll expects that you use a main Row Container that wrap your contents, then you can place an Inner Row inside, screenshot .

Menu & Logo color change

If you need apply the Menu & Logo color change, based on the visibile slide, the method it’s the same used for the main menu automatic color change. Please remind that it’s supposed you have a main column container where you apply the skin for the section. If you need to create a multi-columns layout with inverted color skin insert these columns in a first row level. Please find more infos in the dedicated page Transparent menu skins.

Row naming

If you need to create a navigation label for the Dots menu just open the Row setting, in the Extra tab please apply a name for the Row. Uncode automatically creates a unique Slug reference. Be careful not to give more than one row the same name, screenshot.

Main Menu scrolling

With Uncode you have the possibility to create fully functional single page scrolling navigation websites:

• Single page or one-page website: if your website is based on single page and you don’t have any other pages that link to a scrolled section of the page, open the WordPress Appearance → Menus, create Custom Links and insert your Slug reference with the “#” symbol in the URL. Save the menu, screenshot.
• Single page from an external page: if your website is based on multiple pages and you have other pages that link to a scrolled section of the page, open the WordPress Appearance → Menus, create Custom Links and insert your absolute URL with your Slug reference in the URL, so the final Url should be something like this: http://www.abc.com/#unique-name

Important Notes

Before using any theme, it is important to understand how native WordPress functions work, and how to establish ownership of your new site:

• Hide & Show Rows: it's not possible to use the Row Responsive Settings for the first rows level. You can hide and show contents based on responsive breakpoints on inner rows and columns.
• Despite the name and the effect Slide Scroll is not a browser scrolling behavior and the Theme Options → Menu → Animations (based on the browser scrolling) are not taken in account. The native Slide Scroll menu behaviour is Sticky.

N.B. Note that plugins or frames that use animations or scroll activated behaviours, may not respond to Slides Scroll events (Slides Scroll removes all native browser events as described above), these elements are tailored to work with normal browser scroll events and they are not supported. Particles doesn't work with Slides Scroll.