Creating Code-Free Parallax Scrolling With Shorthand

Regular visitors to the BBC News website may have noticed a trend for lengthy pictorial articles, featuring a particular stylistic flourish. As readers scroll down, the text moves conventionally while images remain fixed in position for a certain amount of time. Then they change, often accompanied by a section heading or pull quote. It’s an ingenious long-form storytelling technique, using a little-known package called Shorthand.

Short back and sides

Shorthand is a cloud-hosted production package, designed to create digital storyboards and dynamic blog posts. It uses a technique called parallax scrolling, where the foreground and background move at different speeds. This relatively simple effect was extremely difficult to program from scratch, but packages like Shorthand allow people with limited technical capabilities to develop new ways of storytelling.

Creating a Shorthand account involves choosing a workspace name and registering email and password details. Having signed in, a dashboard interface encourages the creation of a new parallax scrolling project. This can be a blank canvas or adapted from existing templates, the latter of which is advisable for beginners. Having made a selection, the interface is divided into two sections – text entry on the left, and background images on the right. It’s also possible to specify how long graphics should be displayed while audiences read the overlaid body copy.

A number of visual effects are integrated into Shorthand:

1. Movement.

Imagine four photographs of a person facing in different directions. Placing these in order in the right-hand window means background images noticeably alter as people scroll down through a story. It’s important to note that graphics should ideally be portrait oriented in order to fill mobile and tablet screens.

2. Animations.

A static background may be augmented with animations, rather like a sat-nav screen with overlaid directional lines. An aerial photograph of a city might begin displaying arrows pointing to landmark buildings, while on-screen text discusses the latest object to be highlighted. It’s important to ensure backgrounds don’t become too distracting; they often work better as a point of reference for whatever’s being discussed in the text.

3. Reveals.

Fade transitions introduce segues between two images and are great for ‘what happened next’ scenarios. Imagine viewing an old Spot the Ball competition where scrolling down reveals the ball, or where the outside of a closed box seamlessly transitions to a shot with an open lid revealing the box’s contents. Marketing and advertising represent obvious beneficiaries of such visual trickery, such as teaser campaigns which coyly reveal a single element at a time.

4. Highlighted sections.

It’s possible to darken most of a photograph, thereby highlighting a specific element. Running a series of images in sequence draws the reader’s eye to specific background elements in order, such as individual faces on a group photo while each person’s story is recounted in the overlaid text. As body text moves onto discussing the next person, one face fades back and another assumes prominence.

 5. Panoramic shots.

Although Shorthand encourages portrait images for mobile audiences, widescreen images may be transitioned horizontally as the reader scrolls vertically down. Every transition moves the field of vision slightly further right, which is useful for lengthy expositions where audience attention might otherwise start to waver. It also requires lots of text, giving each frame adequate on-screen time.

Having created a story, Shorthand will assign it a published URL for viewing and embedding. You can select a publication date for any point in the future, set SEO keywords, and even display share icons across mobile devices. More skilled users may wish to add CSS, JavaScript and HTML into their stories; analytics code and third-party advertising are also available to subscribers. Shorthand’s cloud-hosted nature also makes it practical for collaborative projects, where one person assembles copy while another sources and edits images.

Because it dovetails with HTML5, parallax scrolling is ideally suited to modern web-based content. It’s increasingly being adopted as a way of improving audience engagement and maximising on-page time, telling stories in a far more dynamic format than traditional blog pages. Given the development of specialist coding packages like Parade and simpleParallax, you can expect to see an increasing amount of parallax scrolling in the coming years.