Splitting the difference

Namaste!

***UPDATE: I didn’t realize earlier, but enqueueing the multiScroll.js library on non-split screens will break the scrolling capability of the page. I have updated how we enqueue the library to get around this.

This tut will look at how to use the multiScroll.js library in Divi. This library is used to create divided multi-scrolling pages where half of the screen will scroll one direction, and the other half the other. If this explanation is clear as mud, take a look at this demo I set up. Warning, I haven’t set up multiScroll to work with mobile (not sure it can), so this is desktop/tablet only for now.

In this tut we will briefly cover enqueuing the scripts, how to set up your Divi page, a few of the options that multiScroll employs, and finally, a little about data-anchors. I will not be exploring styling of your multiScroll pages. As you can see in my demo, I’m using a clunky menu at the top to hide the small parts of extra sections at the top. This kludge fails at narrower widths and a little bit of the other section shows through – the purple in the above screenshot. Each site is going to need a different amount of fiddling. Okay, enough with the caveats and onto the actual tut!

First up, head over to the multiScroll.js site and download the library. Inside the zip archive you will find a number of files. We will be utilizing three of them for this tutorial – jquery.multiscroll.min.js, jquery.multiscroll.css, and within the “vendors” folder, jquery.easings.min.js. I’m a big proponent of using child themes and as few “crutches” as possible, so I’m going to use these files in a Divi-independent manner. So, I’m going to upload these three files to my hosting account by FTP. Within my child theme folder I made two folders – one for the javascript and one for the styling. Next, open up your functions.php file with your favorite editor.

Next, open up your functions.php file with your favorite editor. We will add in a new function that loads up our library, plus an additional file we will create next. ****UPDATE to code

function addMultiscroll() {
if ( is_page( 'split-screen-demo'){
    wp_enqueue_script( 'multiscroll-library', get_stylesheet_directory_uri() . '/js/jquery.multiscroll.min.js', array( 'jquery' ), null, false );
    wp_enqueue_script( 'multiscroll-easing-library', get_stylesheet_directory_uri() . '/js/jquery.easings.min.js', array( 'jquery' ), null, false );
    wp_enqueue_script( 'multiscroll-init', get_stylesheet_directory_uri() . '/js/SHD-multiscroll.js', array( 'jquery' ), null, false );
    wp_enqueue_style('multiscroll-styles', get_stylesheet_directory_uri() . '/css/jquery.multiscroll.css');
}   
}
add_action( 'wp_enqueue_scripts', 'addMultiscroll' );

Let’s walk through this. On the first line, we set up the name of the function, ‘addMultiscroll’. All of the code in this function will then be wrapped inside a conditional statement. This is because (as I learned the hard way) if you load the multiscroll onto a page, it will prevent normal scrolling. To only load multiscroll on a specific WordPress page we are using the ‘is_page()’ WordPress function. In this case, I’m passing it the page slug, which is the portion of the URL at the very end of the page location. You might have to publish your page in order to determine your slug.
Next, we use a WordPress function called ‘wp_enqueue_script()’. This tells WordPress that when a page gets loaded, this script should also be loaded. Within this function call, we first give the particular script a unique name – in the case of the first one, ‘multiscroll-library’. It is important that these are unique! Next, we identify what we want to load, in this case, we first get the location of our child theme stylesheet using the ‘get_stylesheet_directory_uri()’ function. This will return the path to where we uploaded the files by FTP. We then use the ‘.’ to concatenate the rest of the pathway and the file name. Remember we stored the main library in the ‘js’ folder, so we add ‘/js/jquery.multiscroll.min.js’. The next item passed to this function is dependencies – in this case, we can’t use the multiScroll library without jQuery being loaded. Following that, we turn off any versioning using ‘null’. This is actually optional and we could leave it off in this case. Finally, we can elect to have WordPress load this script in the header or the footer. I’m electing to load these scripts into the header, so I’m passing a value of ‘false’.  

Next, we use a WordPress function called ‘wp_enqueue_script()’. This tells WordPress that when a page gets loaded, this script should also be loaded. Within this function call, we first give the particular script a unique name – in the case of the first one, ‘multiscroll-library’. It is important that these are unique! Next, we identify what we want to load, in this case, we first get the location of our child theme stylesheet using the ‘get_stylesheet_directory_uri()’ function. This will return the path to where we uploaded the files by FTP. We then use the ‘.’ to concatenate the rest of the pathway and the file name. Remember we stored the main library in the ‘js’ folder, so we add ‘/js/jquery.multiscroll.min.js’. The next item passed to this function is dependencies – in this case, we can’t use the multiScroll library without jQuery being loaded. Following that, we turn off any versioning using ‘null’. This is actually optional and we could leave it off in this case. Finally, we can elect to have WordPress load this script in the header or the footer. I’m electing to load these scripts into the header, so I’m passing a value of ‘false’.  

We use this same function to load the other javascript files we need (including a file named ‘SHD-multiscroll.js’, which we will create later in the tutorial. To enqueue the stylesheet we use a similar function called ‘wp_enqueue_style()’. This should be pretty self-explanatory. Lastly, we fire the whole function using ‘add_action()’. Here we are giving the action ‘wp_enqueue_scripts’ – notice it is plural, not singular like within our function. 

Moving on, we will look at the stucture of the Divi page. We will set up three sections that alternate text and pictures. This is replicating the structure they have in the multiScroll.js documentation. There is an outer wrapper with the ID ‘multiscroll’. This is then followed by two <div> containing the left and right panels, with classes ‘ms-left’ and ‘ms-right’, respectively. Finally, each of the panels have a class of ‘ms-section’. When we initiate the multiScroll function we can pass in other classes and IDs, but we will stick with these for now.

On my Divi page I added a standard section and two full-width rows. To each of these rows I added three modules. So the first module of each row will take up half the screen and be placed across from one another by multiscroll. I elected to start with a text module on the left and an image module on the right. Then I alternated for each of the next sets. To replicate the HTML above, first open the section settings (three lines on the left side of the large blue box) and navigate to the ‘Custom CSS’ tab. Add ‘multiscroll’ (without the quotes) to the ‘CSS ID’ box at the top. Save and exit, the open up the row settings of the top row (three lines on the left of the teal-colored boxes). Navigate to the ‘Custom CSS’ tab once again and add ‘ms-left’ to the ‘Column CSS Class’. In the same manner, add ‘ms-right’ to the bottom row. Finally, for each of the modules, navigate to the ‘Custom CSS’ tab and add ‘ms-section’ (no quotes) to the ‘CSS Class:’ box. Great, now we have replicated the HTML structure we need. Last thing to do on the Divi page to replicate the demo is add in our sections menu.

I have elected to do this with a code module. Put in a fullwidth section and add in a code module. Into that code module you can put the markup for your menu.

<ul id="splitMenu">
  <li data-menuanchor="firstSection" class="active"><a href="#firstSection">First section</a></li>
  <li data-menuanchor="secondSection"><a href="#secondSection">Second section</a></li>
  <li data-menuanchor="thirdSection"><a href="#thirdSection">Third section</a></li>
</ul>

So, our menu is a simple unordered list<ul> with the ID of ‘splitMenu’. We will need this ID for initiating scrollMagic. There is a list item <li> for each of the three sections with a link targeting their eventual ID that can be used for bookmarking, as well as another attribute called ‘data-menuanchor’. The data attribute was introduced in HTML5. This allows for the storage of little snippets of data associated with a particular DOM element. In this case, we are using it to store the location that menu item is supposed to scroll to on the page. This can be used for complex page operations where unique IDs can’t neccessarily be addded to each element. I’m not going to go through all of the styling here except to say that I gave it a solid background color and height to mask the tops of each section where they don’t align. If I have time I might go back and find a different way of doing this!

As the last step, we need to write a function to actually initiate scrollMagic on our page. Again, we are doing this by creating a stand-alone file that we upload into the js folder we made in our theme folder. My file is named ‘SHD-multiscroll.js’, but you can name it whatever you want, just make sure to use the correct name in your functions.php file. 

jQuery(window).on('load', function() {
    jQuery('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 700,
        easing: 'easeInQuart',
        menu: '#splitMenu',
        anchors: ['firstSection', 'secondSection', 'thirdSection'],
        sectionsColor: [ '#bb1515', '#645188', '#024747'],
        navigation: true,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: false,
        paddingTop: 0,
        paddingBottom: 0,
        normalScrollElements: null,
        keyboardScrolling: true,
        touchSensitivity: 5,

        // Custom selectors
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',
    });
});

Walking through the code. First up we tell jQuery not to run the function until the widow (images, text, other scripts) is fully loaded. This is important because we want to make sure that the elements we are targeting exists. Next we add the multiscroll() function to the outer wrapper of our HTML that has an ID of ‘multiscroll’ – the ID we gave the section on our Divi Page earlier. Remember, with jQuery we target IDs by adding a ‘#’ in front of them. Everything following this is a list of scrollMagic options and I’ll point out a few. The option ‘menu:’ allows use to link the scrolling to the menu we made earlier. We target it be providing its ID, ‘#splitMenu’. Along with that option, we need to pass in a list of the data-menu anchors. In order to make styling easy, I passed in different background colors for each of the sections using the ‘sectionsColor’ option. Dropping down to the bottom I am passing in the names of the left and right panels wrappers, ‘ms-left’ and ‘ms-right’, plus the name of each panel, ‘ms-section’. Rememeber that we added these to our divi page as classes and jQuery targets a class by pre-pending a period, so ‘.class-name’. And we are done! You should have a split scroller that you can add content to in order to make it your own. Adding new sections is as simple as adding another list item to the menu markup and adding in pairs of panels.

Good Luck!! Feel free to ask questions in the comments or by e-mail. I can give some help if you have trouble with getting the styling just right or explaining some of the other multiScroll.js options.

Metta!!