Build Apple-Inspired Full Page Scrolling Pages For Your WordPress Site
Build Apple-Inspired Full Page Scrolling Pages For Your WordPress Site
That full page scrolling is becoming increasingly popular is hardly surprising as it taps into our paper-based reading experiences and provides all the visual clues about needing to read to the end before “turning the page”.
In this post, I’ll show you how to leverage all the advantages of full page scrolling in your WordPress site by integrating the fullPage.js library – the gold standard of full page scrolling – to build an Apple-inspired, full page, scrolling landing page with animation.
This post was inspired by the examples that Alvaro Trigo has put together to showcase his fullPage.js jQuery plugin which delivers full page scrolling both vertically and horizontally. In particular, the clone of the now-superseded promotional page for Apple’s iPhone 5C is particularly impressive, combining full page scrolling and animation.
Have a look at the demo as this is what we are going to recreate in WordPress. To do this, we’ll need to:
- Create a template specifically for using fullPage.js
- Ensure that any post that uses fullPage.js is rendered using the new template
- Mark-up post content so that it is fullPage.js compatible
- Add custom post-specific CSS for injecting into the output
Steps 2 to 5 are facilitated via a custom plugin. There is a WP FullPage plugin in the WordPress.org plugin repository but I have to confess that I had a hard time using it, so I resorted to writing my own, much simpler version.
Step 1 – Creating A Specific fullPage.js Template
As fullPage.js is, as the name suggests, full page, it needs to operate in as simple a template as possible, devoid of any headers, footers and sidebars that your current theme may have.
And that requires a custom template.
The plugin comes with a simple template (see /templates/fullpage.php), designed to let fullPage.js be completely unencumbered as it does its work:
As you can see, there’s really not much to it. It outputs the standard CSS, the jQuery plugin (both contained in the plugin’s directories) and jQuery itself as well as any custom CSS (this is held in the post’s fullpage_css custom field).
jQuery and jQuery UI are pulled in from the Google CDN, so change this if you prefer to use a local copy.
The only actual content is the post’s filtered content but you’ll notice that we first remove the wpautop filter from the the_content function so that we can better lay out the content without having to worry about superfluous <p> tags being added that can easily break your content.
Step 2 – Ensure the New Template Is Used
It’s no good having a template unless it gets used of course, so the plugin that adds fullPage.js to your WordPress install, uses the template_include filter to change the template if the post is using fullPage.js.
The fullpage template is located in the plugin’s /templates folder.
Step 3 – Mark-up fullPage.js Compatible Post Content
When porting the example across to WordPress, there were a number of decisions to be made about how much functionality should be abstracted.
To keep things initially simple, I’ve opted for (only!) 5 new shortcodes to model fullPage.js‘s basic structure:
- fullpage – this is the main container for a fullPage.js page; all content should reside inside this wrapper
- section – a section is effectively a page; has the following attributes:
- action – is currently translated to a class
- slide – similar to section in that it is a page but is intended for horizontal scrolling; should always be contained within a section; has the following attributes:
- bg – the url of an image to be used as the background image
- header – a fixed bar at the top of the page
- footer – a fixed bar at the bottom of the page
So, a basic fullPage.js structure would look something like this (in text mode):
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
This is slide 1
This is slide 2
This is slide 3
<p>This is section two!</p>
In the Apple example, this means that quite a bit of the mark-up is left as <div> tags.
Here’s the content marked-up with the shortcodes and the <div>s:
Step 4 – Add Post-specific CSS
One of the enormous benefits of fullPage.js is just how flexible it is and I wanted an implementation that didn’t restrict that flexibility at all.
So, I’ve left the adding of custom CSS to a textarea in a new post edit screen metabox created by the custom plugin.
This CSS is for custom styling only – there’s no need to define the structure of a section or slide, this is done in the standard CSS file
The post-specific CSS for the Apple demo is:
It’s pretty comprehensive and all the sections are styled beyond the standard styling. Of particular interest is the treatment of the #staticImg element. This is actually the green iPhone that slides from section 3 to 4 on scroll; this animation is controlled via the toggling of the moveDown and moveUp clauses.
If you leave this empty then the standard script will be used but in this case the Apple demo requires a little more interaction:
The script is an initialization of fullpage (the #fullpage id is automatically added when processing the [fullpage] shortcode) and consists of setting properties and specifying functions to call on fullPage.js custom events.
The 2 custom events used here are afterLoad and onLeave and refer to the displaying of a section. The events are used to trigger functions that toggle classes on various elements in order to trigger an animation.
For example, in the afterLoad function, if the index is 2 (that is the second section is being displayed) the images in the section have the active class added (these trigger the horizontal slide-ins).
Step 6 – Finalizing And Running The Demo
Before you can view the final demo, you’ll need to insert the images into your post. I’ve included them in the plugin’s folders, so locate that folder and do a batch upload.
You’ll need to change the filenames in the content to match your installation.
Once the images are loaded, you are good to go. If you view the post, you should be looking at something similar to this:
On a desktop use the mouse scroll-wheel to navigate the sections, on a tablet swipe up and down (although be aware that the demo is not really designed for a tablet).
Tip Of The Iceberg
This is an impressive demo but, of course, all the hard work had already been done by Alvaro; all we had to do was make it WordPress-friendly.
That said, the basics of sections and slides should work out of the box, so you have the beginnings of a really very powerful tool for building some impressive landing pages, especially when those CSS3 transition muscles are flexed.
It would be a waste, however, to restrict fullPage.js to just landing pages. Alvaro’s additional examples such as the One Single Section (a full page slider sitting above normal website content) should fire up plenty of curiosity and it’s not hard to see fullPage.js being used to deliver a wide range of fullpage scrolling content that is at home both on the desktop or mobile devices.
I’ve included the Apple, One Single Section and Vertical Navigation Dots examples in the plugin’s /content folder, so have a play with this awesome library. Yes, there can be quite a bit of hand-coding involved but the results are definitely worth it.
What’s really required, is a little imagination.