multiScroll in Genesis

multiscroll is a jQuery plugin by Alvaro Trigo to create divided multi-scrolling pages with two split vertical layouts or panels.

In this tutorial we shall

• register a multiscroll Custom Post Type having two custom fields, Left Image and Right Image
• create a custom Page template having the code to dynamically pull in the Left Image and Right Image image fields from multiscroll CPT. We shall set up two while loops to arrange the markup needed for multiScroll jQuery script (enqueued)
• add CSS to fix header at top and footer at bottom of the page.
• apply the template to a static Page

Sample screenshots:

CPT with the two custom image fields in the back end:

A single multiscroll CPT entry in the back end:

Front end:

At smaller widths we shall change the background-size from cover to contain so the images can be seen in their aspect ratios rather than getting stretched vertically and getting cut off. Note that this will reveal the background color above and below the images. The split scrolling effect will continue to work.

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Install and activate Pods.

Create a new CPT with Multiscroll as the Singular Label and Multiscrolls as Label.

In Advanced Options untick the support for Editor.

Add two mandatory "File / Image / Video" type fields called Left Image and Right Image.

Step 2

Add new entries at Multiscrolls > Add New and upload your desired left and right image for each.

Step 3

Upload jquery.multiscroll.min.css to child theme's css directory (create, if not existing)

Upload jquery.multiscroll.min.js to child theme's js directory.

Create a file named say, multiscroll-init.js in the same location having the following: