Slides Scroll provides a toolset 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:

• Slides Scroll Presentation (Parallax)
• Classic Firm (Parallax)
• Creative Director (Zoom)
• Shop Techie (Parallax)
• Blog Impact (3D)

▶  

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 customize 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 behavior 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'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 on the page are full-height, please set for any rows the Height option to 100%.
• Row container: Slides Scroll expects that you use the main Row Container that wraps your contents, then you can place an Inner Row inside, screenshot .

Menu & Logo color change

If you need to apply the Menu & Logo color change, based on the visible 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-column layout with inverted color skin insert these columns in a first-row level. Please find more info on 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, and to not use numbers in the Row 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 a 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 (please take care to not user numbers in your hashtag fragment): 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 content 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 into account. The native Slide Scroll menu behavior is Sticky.
• Parallax does not work with Slides Scroll and Scroll Snap, as these effects are not authentic browser scrolls.
• Elements that change the height of the Row container could block Slides Scroll, for example, a Posts module with Load More feature loading other posts, or Tabs and Accordion modules.

N.B. Note that plugins or frames that use animations or scroll-activated behaviors, 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 plugin doesn't work with Slides Scroll.