At the end of 2013, Apple released the iPhone 5S, which was accompanied by a presentational single page-scroll website. This was a welcome change for many web developers and designers. In turn, 2014 saw a rise in these types of sites where information was divided into sections and default scrolling was replaced with a custom scroll where visitors could only scroll from section to section. In this way, websites become like short plays – you could direct every scene, each differing from the next, and you wouldn’t risk users skipping or missing any of your content.
We helped Monotype introduce book-style chaptiers on their homepage -- also known as single-page scroll.
So what’s the trick to achieving this type of behavior? There are a lot JavaScript plugins readily available. The most popular are fullPage.js plugin by Alvaro Trigo and One Page Scroll plugin by Pete Rojwongsuriya. Both of them are complex and have many features, making them great as standalone plugins but hard to integrate with other solutions.
At Devbridge, we’ve tried to implement both of these plugins, but each time we’ve encountered some kind of problem. We decided to write a new plugin that would satisfy our needs, as follows:
Be lightweight
Have a simple markup
Have possibilities to enable/disable actions (public methods)
In this article we will review what are most important points to remember when writing and and implementing single page scroll plugin.
Before Starting
The very first thing to remember when designing this type of website is that it’s sort of like designing PowerPoint slides. There shouldn't be too much different information in one section. Sometimes, even a single image can provide more valuable information than a few sentences.
From a technical standpoint, it is important on page load to disable the scrollbar. This way, the user won’t jump to a random section before the plugin initiates, thus preventing the plugin from calculating the position incorrectly.
Navigation
Single-page scroll works by removing the default scroll behavior, so you must provide the user with alternative ways to get from one section to another. There should always be visible navigation in each section, which upon clicking allows the user to jump to another section.
Do not limit the user to only one type of scrolling:
Use keyboard inputs (remember to check if these are not form inputs)
Add custom mouse wheel actions
Add touch gestures
Remember to add a timer between scroll actions so that the user can’t jump over all the sections in one scroll.
Image Loading
Generally these types of website have full screen background images. To have an enjoyable user experience I recommend preloading images by one of these two ways:
On page load by reading CSS file and filtering images and preloading them. In this case you should have separate CSS file for this page causing an increase in page load time but having a continuous experience after it.
Before moving to a new section by finding images in the section and preloading them. This allows faster page load time and will save network bandwidth but on scroll between sections there may be small image flickering.
Animation
For scrolling from one section to another I recommend to use CSS3 transform for move and transition for animation. Do not make the mistake of scrolling with absolute positioning, because it is intended for layout purposes and will have bad performance. Also for browsers that do not support CSS3, use JavaScript animation.
Public Methods
There are always situations when you need to call action outside of a plugin or disable some kind of action, i.e. if there is a modal window in one of the sections. In that case, you may want to disable keyboard actions to prevent overlap. For these purposes, a plugin should have public methods:
To init/destroy plugin
To move up and down or to a custom section
To bind/unbind navigation actions (mouse wheel, keyboard, touch gestures)
Responsive View
From our experience, we can say that if you’re starting from a small tablet or mobile device, it is better to disable the plugin and have default scrolling. Mobile devices have different scrolling methods than desktop views.
Testing
You have to remember that in this type of website, it is very important to not only test on different screen resolutions but also with different height and width ratios.
Final Thoughts
Single-page scrolling is a great solution if you want to tell a story. Remember, you don't have to try and put your all of your content into just one page. Instead, just select a single piece of content and divide into consumable points that you want the user to take away. So try our open source jQuery-BetterScroll plugin for your next project!