Parallax scrolling and other standout scroll effects: top examples and how to create them
Scroll effects create beautiful reading experiences and can be used to improve engagement and recall.
by Ben Ice
But there’s such a thing as too much of a good thing.
This guide explains parallax scrolling and related 3D effects, with practical examples and expert guidance from Shorthand’s Principal Story Experience Designer, Scott Moorhead. You’ll learn how to use these techniques consistently and effectively to create more immersive, engaging stories.
What is parallax scrolling?
Parallax scrolling is one type of scroll-driven effect used in digital storytelling. Traditionally, the term refers to a technique in which foreground and background elements move at different speeds to create the illusion of depth.
‘The Boat’, by SBS, is a strong example of parallax scrolling used to draw readers into a story. It turns Nam Le’s short story into an immersive scrolling graphic novel. While the multimedia opening shocks and excites, the parallax effects further down the page help sustain attention over the longer read. Comic panels, speech bubbles, and illustrated background elements scroll at different speeds, creating a strong sense of motion, depth, and pacing.
Parallax scrolling sits alongside other motion-based storytelling effects, such as zoom, fade, pan, and scroll-driven animation. These effects can be used to bring visuals to life and guide attention through key moments.
Why readers love parallax scrolling
“It gives a little bit of extra bang for your buck”, says Scott. “If you can do it well, the effect it has on your readers outweighs the effort that you put into it in making something that little bit more sparkly and engaging.”
Scroll effects can help marketers and digital publishers enhance engagement. Our recent deep dive found that interactive section types such as Text Over Media, Reveal, Scrollmation, and Scrollpoints appear more often in high-engagement stories.
In one online shopping study, parallax storytelling improved brand attitudes and increased willingness to pay a higher price. Another study, from Purdue University, linked it to an increase in fun and perceived design quality.
But these benefits depend on execution: when overused or poorly designed, scroll effects can feel distracting or even overwhelming. As the examples in this article and Scott’s tips below show, restraint is key.
3 examples of scroll effects at work
These examples show how publishers and brands use motion, depth, and scroll-driven interactions to create unforgettable reading experiences.
A step into the seed bank
‘The Nature of Strength’, an article by CSIS exploring threats to global crops, stresses the importance of international cooperation and the creation of genebank facilities. Its Title section uses motion to pull the reader directly into a virtual seed library. The result feels closer to a scene transition than a traditional article header. “In that title scene, the parallax effect is achieved by shifting the perspective as the viewer scans across the shelves,” says Scott.
“The title text moving in a different direction adds another layer of depth.”
Mark Cavendish's story
BBC Sport’s story about decorated British cyclist Sir Mark Cavendish repeats the same subtle scroll-driven effect across all of its full-screen visuals. “And it’s stronger for it,” says Scott.
“Continual repetition of the same nice, subtle effect lends it some class and professionalism.”
As readers move into the next section, the imagery fades out smoothly.
“You’re being led into it as that first full-screen image fades into the background colour of the following section,” Scott says. “It’s a nice way to move from a full-screen image into the next section.”
A day with Ireland's most isolated rugby club
The title section of this sponsored article in the Irish Independent uses a simple layered scroll effect. A street sign sits in the foreground while the headline moves up behind it, making the text feel part of the photographed environment.
It’s a parallax zoom — the foreground objects move towards the viewer faster than the background objects — paired with scrolling text. “This effect is both surprising to the viewer and surprisingly easy to create with Shorthand,” Scott says. More on that below.
Because the text is HTML, not baked into the image or animation, it also offers SEO and accessibility benefits.
Five ways to create immersive scroll effects using Shorthand
All of the effects below can be achieved with Shorthand’s existing tools, with no CSS required. Depending on the style of story you want to build, you can use anything from a subtle scroll effect to a more advanced animated sequence.
1. Use scroll effects for subtle motion
Scroll effects are a simple way to add motion to an otherwise static title or image section.
“A gentle zoom in or out adds some stylish dynamism and it’s as simple to apply as a button click or two,” Scott says.
Scroll effects tool in the Shorthand app
Scroll effects tool in the Shorthand app
Choose a Title or Text Over Media section, add your image, then apply an effect such as zoom, fade, or blur. These effects work especially well when you want a lightweight visual treatment that enhances a section without turning it into a full animation.
Use Scroll Effects when:
- you want a subtle sense of motion
- you’re working with a strong hero image
- you want to add energy to a title or transition section
Here's an example:
PICK A CARD...
...ANY CARD
2. Use foreground animation effects
Simple foreground animation effects can be applied to a pair of images. Select your effect — fade in, slide in, or both.
The foreground animation effects dropdown menu in Shorthand
The foreground animation effects dropdown menu in Shorthand
“You can have the background images zooming in while you have the foreground image zooming out,” says Scott.
“That is more of the traditional parallax kind of effect, where you’ve got things moving along the same plane, but to different degrees.”
Here's an example:
King of Bells
King of Bells
Flag of Acorns
Flag of Acorns
Two of Flowers
Two of Flowers
3. Use 3D Images for layered depth
3D Images can help storytellers who want a more recognisable parallax scrolling look. They let you apply depth and motion to a single image, and can also be used with text so that headings or copy appear to move in front of or behind visual elements. This gives the story more dimensionality and creates the layered feel that people often associate with parallax design.
Preparing 3D Images in the Shorthand app
Preparing 3D Images in the Shorthand app
Simply insert a new Title or Text Over Media section into your story, open the image edit panel, then select the 3D Images button. Upload your image and you’re ready to go, or click ‘GENERATE 3D IMAGE’ if it’s for an existing image. From there, you can set a ‘text depth’ to place your headings between image layers as they scroll, then choose 3D effects such as dolly, zoom, pan, and tilt.
Scott suggests this tool works best with natural scenes and organic forms, rather than subjects with rigid lines and angles. “The distortion that can occur as readers scroll suits shapes that, by their nature, aren’t perfect 90-degree angles and straight lines. Though it’s worth experimenting with any image, as different movement settings will also play a part in how much an image bends or shifts when scrolled.”
“What can work really well is using limited or no 3D movement in the section, but instead using the feature to separate the scene into foreground and background ‘layers’ and having the title text run between them” — as seen in the Connemara Rugby Club example above.
Here are two example treatments:
Immerse with 3D effects.
RUN RUN RUN
RUN RUN
RUN RUN
RUN RUN
BREATHE
RUN RUN
RUN RUN
4. Use Scrollpoints to guide readers through an image
Scrollpoints is an ideal tool when you want the reader to explore one image in stages. As the audience scrolls, they move from point to point while text and visual highlights explain what they’re seeing.
Preparing frames in a Scrollpoints section
Preparing frames in a Scrollpoints section
Scott says designers can achieve a range of interesting animation effects with Scrollpoints “by defining those parts of the image that need to appear on screen and subtly shifting them from frame to frame. With that, you can create a slow, horizontal movement, or a dramatic drop in or pull out of a frame.”
“That can be really engaging, and only requires a single image.”
Use Scrollpoints for:
- maps
- annotated photography
- architectural features
- diagrams and illustrations
- artworks or historical imagery
- horizontal scrolling
While Scrollpoints may not produce a traditional parallax scroll effect, it achieves a similar result: readers move through a layered visual space as the story unfolds.
Here are two examples:
When I first moved to the coast, I wasn’t much of an adventurer. My days were filled with office cubicles and predictable routines.
I had always been drawn to the ocean from a distance but had never ventured beyond dipping my toes in its waters. That changed one summer when a friend convinced me to give surfing a try.
I walked onto the beach with a borrowed board, feeling like an imposter. The instructor gave me a quick rundown of how to balance and paddle. I listened attentively, but the reality of standing on a board while the sea tossed me around seemed daunting.
The first few attempts were clumsy. I’d manage to stand for a second before tumbling into the waves. I was frustrated, embarrassed, and tempted to give up.
On the fifth day, something shifted. I caught a small wave and, for the first time, felt the board glide beneath me with a sense of grace I hadn’t felt before. I rode it for a few precious seconds, feeling the exhilaration of the wave’s power.
In that moment, I was no longer the girl who was afraid of falling; I was someone who had learned to rise with the waves. Each next wave taught me about patience and self-compassion.
As the weeks turned into months, surfing became more than just a hobby; it was a way of reconnecting with myself and nature. I realised that my initial fear had transformed into a profound love.
Surfing taught me to embrace uncertainty and to appreciate the simple joys of life. It’s a journey I continue to ride, one wave at a time.
The art of
driving beautifully
By Casey Lang
5. Use Scrollmation for full animated scrolling
For the most control over the scrolling experience, use Scrollmation or Background Scrollmation.
Preparing a Scrollmation section.
Preparing a Scrollmation section.
These sections let you build a flipbook-style sequence of images that animate as the user scrolls. That makes them useful for more advanced storytelling moments where you want to show progression, movement, transformation, or a change in scene.
Background Scrollmation adds another layer by allowing passages of text to scroll over the animated sequence, which can create one of the most immersive forms of scrolling in a longform story.
Scott recommends this method for storytellers with access to a range of images — perhaps stills from a video, or screenshots from a 3D program — and with moderate to advanced skill levels.
Use Scrollmation when:
- subtle motion isn’t enough
- you want to control the sequence frame by frame
- your story depends on animation to explain a process or journey
Here's an example of Scrollmation in action:
As a form of entertainment, magic easily moved from theatrical venues to television magic specials. Performances that modern observers would recognize as conjuring have been practiced throughout history.
For many recorded centuries, magicians were associated with the devil and the occult. During the 19th and 20th centuries, many stage magicians even capitalized on this notion in their advertisements.
Multiplying billiard balls is a magic routine that is popular with advanced conjurors but rarely seen.
Blue ball
The same level of ingenuity that was used to produce famous ancient deceptions such as the Trojan Horse would also have been used for entertainment, or at least for cheating in money games. They were also used by the practitioners of various religions and cults from ancient times onwards to frighten uneducated people into obedience or turn them into adherents. However, the profession of the illusionist gained strength only in the 18th century, and has enjoyed several popular vogues since.
Opinions vary among magicians on how to categorize a given effect, but a number of categories have been developed.
Magicians may pull a rabbit from an empty hat, make something seem to disappear, or transform a red silk handkerchief into a green silk handkerchief.
Magicians may also destroy something, like cutting a head off, and then "restore" it, make something appear to move from one place to another, or they may escape from a restraining device.
Other illusions include making something appear to defy gravity, making a solid object appear to pass through another object, or appearing to predict the choice of a spectator. Many magic routines use combinations of effects.
An illustration from Reginald Scot's The Discoverie of Witchcraft (1584), one of the earliest books on magic tricks, explaining how the "Decollation of John Baptist" decapitation illusion may be performed.
One of the earliest books on the subject is Gantziony's work of 1489, Natural and Unnatural Magic, which describes and explains old-time tricks.
In 1584, Englishman Reginald Scot published The Discoverie of Witchcraft, part of which was devoted to debunking the claims that magicians used supernatural methods, and showing how their "magic tricks" were in reality accomplished. Among the tricks discussed were sleight-of-hand manipulations with rope, paper and coins. At the time, fear and belief in witchcraft was widespread and the book tried to demonstrate that these fears were misplaced. Popular belief held that all obtainable copies were burned on the accession of James I in 1603.
Quick tips for using parallax and scroll effects in your storytelling
Use restraint
“It’s often tempting when you’ve been shown that you can achieve 150 effects to use them all!” Scott says. But this can be compared to mixing all your favorite foods together and expecting the result to taste amazing.
Exercise restraint when applying these effects. “The best dishes often have only a few ingredients used really well.”
“Pick one or two effects for a story,” he advises. “Use them once if they are big movements, or use them repeatedly and consistently if they are subtle.”
Choose the right media
Consider how your images will work with surrounding content, with overlaid content, and at different screen sizes. Especially where you are placing text over an image, such as in a Title section or other chapter heading, it’s important to know whether the text will obscure important parts of the image, or whether your effect will be enhanced if you can make some of the text appear immersed in the image’s 3D environment.
For example, you never really want text to appear over the primary subject in an image, especially a face. You can either ensure there’s enough clear space around the face to position text to the side, or consider using the 3D effect to have part of the title appear ‘behind’ the subject for that classic magazine-title look.
Let the media guide your creation
Scott advises choosing and planning your scrolling effects based on the media you have available. “If I have access to a 3D render or video that I can manipulate and take screenshots from, then a frame-based animation in a section to accompany a lot of text is great.
“But if the story is much more of a pictorial-essay type, then I’ll tend to use a more restrained application of just one or two effects multiple times throughout the story: like a ‘drop-in’ effect created with Scrollpoints sections, or subtle zooming on full-screen images.”
Test, test, then test some more
Always check on multiple devices. Shorthand has an easy way to test stories on real devices by snapping a QR code, and also a few different simulated device screens to choose from in Preview mode.
Sometimes an animation that works on a desktop or laptop screen doesn’t look quite right on mobile. For instance, a group of images each sliding up on a wide desktop screen might look much better individually sliding in from the side on a mobile screen. If this is the case, it’s easy to create multiple versions of a story section to show on either desktop or mobile.
Frequently asked questions
Which scroll effect should I use in my story?
It depends on your narrative and the media you have available. If you want to use one or two bold effects or more advanced animation, Scrollpoints or Scrollmation could work well. For subtler effects used throughout a story, Scroll Effects or Foreground Animation Effects can help break up sections of text. If you’re working with organic forms and short scrolling elements paired with text, 3D Images can be a strong option.
How do I use scroll effects without overdoing them?
The key is restraint. Don’t be tempted to use every tool available. Choose a single effect, or a small set of effects, to use consistently throughout your story, and ensure they complement rather than overpower the narrative. Finally, test your story across multiple device sizes to make sure the effects don’t feel distracting or excessive.
Why does parallax scrolling work in storytelling?
Parallax scrolling is effective because it makes stories feel active rather than static. Instead of simply reading down a page, the audience experiences movement, pacing, and reveal. Scroll effects are a powerful way to:
- improve visual engagement
- strengthen story structure
- create smoother transitions between sections
- highlight key images or details
- make branded content and longform journalism more memorable
What’s the best way to use parallax scrolling?
Use parallax scrolling selectively. Avoid using it everywhere — choose moments where movement adds clarity, atmosphere, or emphasis. Make sure you’re also testing the live experience to ensure large image files aren’t slowing down page speed.
What’s the difference between parallax scrolling and other scroll effects?
Parallax scrolling usually refers to layered elements moving at different speeds in the same direction to create the illusion of depth. Other scroll effects, such as zoom, fade, pan, and scroll-driven animation, can create similar senses of movement and depth, and heighten engagement with your readers.
Built with Shorthand