You’re Doing It All Wrong: Using Parallax to Make Your WordPress Site Pop
You’re Doing It All Wrong: Using Parallax to Make Your WordPress Site Pop
For many years, websites were made up of the same components, presented in a similar manner. You basically had your text and your media. That’s about it. But then interactive elements emerged that allowed users to interact with text. Hover effects and things of that sort.
Out of that desire for user interaction with content, parallax effects were born.
Just about everyone has seen parallax in action by now but that doesn’t mean everyone knows what it is, how it works, or what it’s used for. Those that do have familiarity with the effect tend to love it or hate it. There’s rarely a middle ground.
When a design element becomes contested, it makes me question why? What is it about parallax that has people so passionate? Why do the naysayers nay? And why are advocates so enthusiastic?
What follows is an explanation of parallax, what it is, how it works, plus a defense of its use as an engaging design technique. Here, I’ll argue this design trend can captivate your audience and pull them into your personal or brand story in truly amazing ways. And of course, I’ll include plenty of real-life examples.
What is Parallax?
Parallax first got ascribed to a design aesthetic back when side-scrolling video games emerged. It referred to the visual effect created when the background image moved slower than the foreground images, creating a sense of depth. This was then applied to the web design world in 2011 through a combination of HTML5 and CSS3.
An early popular example of parallax scrolling was implemented by The New York Times on their Snow Fall story. The combination of animated and video backgrounds made for a story experience that felt truly immersive. There really hadn’t been anything like it on the web before. Beyond the parallax effects, the story itself was broken up into chapters, even. It’s still something to behold.
The parallax design concept is actually pretty simple. It adds an element of three-dimensionality to a website by making the background reveal at a slower pace than the foreground when a user scrolls down a page. This makes it look like the text and images are floating on top of the background, adding an element of interactivity that’s not present on a standard text-on-flat-background site.
But the concept is so simple that it’s frustrating to some. Parallax can be viewed as a gimmick. After all, nothing about the content or substance of your site is necessarily different. But add that animation effect and suddenly everything’s more appealing? That notion might rub some the wrong way. A study conducted at Purdue University did show that while popular, parallax scrolling doesn’t always improve user experience. But when it does? Oh boy, does it work!
Businesses and the Art of Telling Stories
All businesses with a mission have a story to tell. This story doesn’t necessarily need to be a literal “once upon a time” sort of deal, but it does need to convey a message about your company in a relatable way. For some businesses, the story involves college-aged entrepreneurs building a business in their dorm-room. Like Facebook. Their story has a solid narrative that people can relate to, aspire to, and be inspired by.
Even all the way back when its slogan was “Think different,” its message was all about being the rebel, thinking outside the (beige) box, and embracing creativity.
But a company’s story doesn’t even need to relate directly to its founding. Rather, it can convey a message about how customers and clients use its products.
The story can relate to the lifestyle one will lead with the company’s products in hand. Think of Apple. Its story is one of innovation and style.
The story a company tells about itself or what a customer’s life will be like with its product is an essential component of brand development and marketing. A lot of the work of storytelling used to happen within magazine ads, in store displays, and in professionally distributed marketing materials. Now, a company can relay their story at a fraction of the cost online by leveraging their websites as storytelling platforms.
Storytelling as a marketing tactic isn’t new. In fact, all good marketing tells one story or another. But the telling of a story with a narrator or characters, a setting and expressive prose isn’t something every business entertains. In many cases, they should, and a website is the perfect place to do it. Why? Well, think about it:
- Websites are equal opportunity. Anyone with an Internet connection can see your site. There’s very little paywall to access your content, which means your story can resonate with a larger audience.
- Websites provide unlimited access. Anyone can visit your site any any time of day. A television ad only runs at certain points throughout the day or night but a website is accessible 24/7, increasing your potential audience exponentially.
- Websites offer an interactive platform. Traditional marketing isn’t nearly as interactive as a website is. Visitors can scroll through your story at their leisure, click on links, watch videos, view image galleries, etc. They can interact with your content in a hands-on way, making your message much more memorable than if they were just passively viewing it.
There are a few drawbacks to using parallax scrolling on your site to tell stories or even just to offer an alternative method of navigation. The primary issue is related to SEO. One-page sites (which most parallax-scrolling sites are) only consist of a single HTML page, which means your site is only indexed once in Google. You only have one header tag and one URL. This can make your site take a significant hit in the search results, which is a real problem for businesses.
However, many developers get around this by using the one-page format for delivering the main story of the site and still offering a traditional blog for creating extra pages and updating content.
Slow load times are also a problem. A site with an integrated video background, numerous high resolution images, and audio can take a long time to load, increasing the risk of visitors bouncing before taking in the full experience.
Why Parallax is Perfect for Storytelling
Now that we’re clear on why websites make the perfect storytelling platforms (and why every business has a story to tell) we can get back to the subject at hand—parallax. In case it isn’t clear by now, I think parallax scrolling makes for the perfect accompaniment to a good online story. It can be overused, yes, but for the most part it’s an effective tool.
One of the biggest draws of parallax scrolling for storytelling is that it’s totally immersive. It draws the reader in from the beginning and encourages them to scroll down the page to reveal the next part of the story. Scrolling is like turning the page of the book. And we all know how immersive books can be.
Check out the Dangers of Fracking site. Right at the start, the user is encouraged to “Dive Down” or scroll to get more information. First, a definition is revealed. Then as we follow the water droplet down further, we get the illusion of animation as trucks pass each other on a highway. Then the dangerous chemicals involved in fracking are revealed. Finally, more scrolling shows the droplet combined with chemicals as it plunges into the ground and leaks out into well water, causing contamination.
The visuals here are simple yet compelling, in large part because the act of scrolling reveals more of the story and encourages the reader to be immersed in the process of its telling.
It Gives the Visitor a Sense of Control
As I mentioned above, scrolling on a parallax site can be likened to turning the pages of a book, which means the site visitor has control over what they see. This is different from clicking because the scrolling action is seamless. A simple, repetitive movement, continuously reveals more parts of the story.
Take the NASA Prospect site for example. There are audio and visual elements in play here, which makes this a true piece of interactive storytelling. There are parts to click, music to play, and log entries to read, all within the scrolling story that was created by students from the University of North Dakota in collaboration with NASA and the Humans in Space Art program.
It Allows for Unique Content Experiences
The two examples I already offered are definitely unique but the Scroll for Your Health site is a good example of how presenting familiar information in an original way can make a huge impact. As you scroll through this site, you’re presented with different fruits.
As an illustration of an orange comes together slice by slice, you learn the healthy attributes of this fruit. And as you continue to scroll, you learn the benefits of a variety of other fruits and are left with the parting wisdom of “eat more fruit.”
This site has a simple concept but it’s highly effective as a piece of interactive art.
It Makes Your Content Stand Out
If you’re trying to establish your business as one that’s different from all the rest in your niche, you can accomplish that partly by creating a website that stands out from your competitors’. How many web designers have a standard portfolio site? A lot, right? But what Alquimia has done is create a design that sets them apart.
The design firm creates interactive and stylishly designed websites, apps, and online experiences for a wide variety of clients. But what makes their site stand out is the parallax scrolling and cursor following effects on their homepage. When you scroll and move the cursor around the screen, the background stars move in the opposite direction, adding a greater depth of field.
Using Parallax to Tell a Story and Improve UX
Now that you have a good understanding of why parallax is so effective, we can begin to discuss some of the ways in which it can be implemented on websites, WordPress sites, in particular. Here are a few tips for using parallax storytelling in such a way so as to also improve the overall user experience.
Offer Something Unique Upfront
In order for a story using parallax scrolling to be truly effective, you need to make it clear upfront that your site is different than others. At first glance, it shouldn’t look like all the other sites out there with a nav menu across the top and a header image. I mean, it can have those things, but it’s a much better idea to use something different to capture attention straight away.
A good example comes from The Lab, an online portal created by Alzheimer’s Research UK to provide an interactive learning experience to educate the public about dementia. Once you get past the introductory video, you’re presented with a parallax scroll-enabled site that takes you on a virtual walk through a laboratory. It helps people understand what scientists are currently working on with regard to dementia research and informs people of how they can help.
As you move through the “tour,” circles appear that allow you to click through for more information on various topics like dementia research numbers and what the brain looks like under a microscope. Point being, this site looks different than a standard research site, making it standout in a big way.
Guide the Visitor Through Your Story
Any parallax site is going to guide visitors through the content in some way. However, it’s not always as purposeful as it could be. If you’re trying to tell a story, the design should guide visitors through it. This can’t be a passive thing. The scrolling should take visitors from one topic to the next in a logical fashion, much like chapters in a book, or sentences in a paragraph.
I particularly like what the Wildlife site does in this regard. The Wildlife is made up of a “crew of digital pioneers” who make websites and digital projects that stand out through the use of character design, animation, rich media, UX, and UI integration. Their emphasis is telling an individual brand’s story and their website walks visitors through the story of how they tell stories. How’s that for meta?
The cursor is transformed into a “down” button so you always know what’s going to be next and there are plenty of slideshow/video widgets throughout that users can interact with. With multi-layered scroll effects that take you through a timeline, a shuttle launch, and a moon landing, you won’t soon forget this site or the story it tells.
Make it About More Than Just “One-Page”
There are a ton of one-page themes out there with a great number of them using parallax scrolling to transport visitors from one section to the next. However, many are just basic sites but instead of pages, they have scroll-to sections. There needs to be an actual narrative in order for parallax scrolling to be elevated to a storytelling technique.
Check out BrewLife Marketing Agency’s site. It’s a portfolio site, sure, but there’s also a definite story here. The way parallax is subtly used to encourage visitors to delve deeper into what the company is about and how they approach client work is compelling. And it’s not even a one-page site. It has a blog and individual pages for samples. And the best part? It was built using the Divi theme from Elegant Themes.
Encourage Visitors to Ask “What’s Next?”
Any good story should prompt the reader to turn the page; to wonder what’s going to happen next. Your parallax website should do the same through content and/or navigation. Some sites opt to leave the navigation at just scrolling. However, this isn’t always sufficient. Sometimes, including navigation alongside the content can be helpful for visitors to get a sense of where they are in the story. This also gives them some control to skip around should they so choose.
Downward arrows are also helpful in literally pointing visitors to where they should go. And in cases like the narrative story experience The Boat, there’s the word “Scroll” with an arrow pointing down so there’s no question as to what you should do next.
Haruki Murakami, is a well-respected novelist known for his works like Hard-Boiled Wonderland and the End of the World. He has a site that infinitely makes readers ask “What’s next?” Built on the Underscores starter theme, each scroll downward on this site reveals another quotation, another book, another feature to explore. The links up top direct you to the same places but the scrolling is enigmatic and quite engaging.
Keep Visitors on Your Site Longer
This falls right in line with the idea of encouraging readers to ask “what’s next,” discussed above. A good parallax site can keep your visitors on your site for much longer than they would on a traditional site. Because the emphasis is on scrolling, they’re much more likely to scroll all the way down to the bottom of the page—and enjoy the trip there!
The lengthened site stay means you need to prioritize your calls-to-action and display them at various points throughout the page. The site for the now defunct app Ben the Bodyguard leaves the CTA to the very bottom of the page, which is in keeping with traditional long-form sales copy. And in this case, it definitely works because there’s a clear narrative you follow as Ben walks along the seedy city streets. If the story you’re telling isn’t quite so linear, however, it might be a good idea to feature a CTA earlier on, or off to the side of the main content to capture leads as visitors scroll down (and down and down).
Another example comes from creators of cucumber seltzer, Cornelius Krump. The site was built as a child theme to the single page theme, Tides. Everything about this site imitates the websites of high-end alcohol purveyors while maintaining a playful edge. Cucumber-green mustaches, anyone? Before scrolling, there’s the word “Curious?” with a downward arrow, enticing you to find out more. Once clicked, you’re taken to the company’s origin story and as you scroll, bold images, textured backgrounds, and personality come in and out of view.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
Maintain Elements of Traditional Navigation
Pitchfork magazine is an online music journal that covers what’s currently going on in the world of music (with a fair bit of nostalgia thrown in) that offers traditionally-styled articles and news content. Navigation all throughout the site is as you’d expect with a main menu across the top and story headlines and images featured in a masonry layout.
But it also has a feature called “Cover Stories” that’s seriously impressive (if you haven’t checked it out before, do it now!). The stories are listed out blog style but once you click through, it’s nothing like you’ve seen before. These parallax stories are super simple but the combination of two-column text, large quotations, images, and fullscreen background videos make them stand out.
There’s much to be said for the subtle cinematography here, too, but the way everything’s put together with parallax effects is quite simply beautiful. Plus, there’s a drawer menu along the lefthand side of the screen for direct access to the featured artist’s music.
Be Creative in How You Use Layered Effects
Because of the illusion of depth parallax design afford you, it’s possible to create a multi-layered effect when a user scrolls. Yes, the background moves slower than the text on top of it, but you can play with that even more with images that fold into the forefront, text that slides in, and sections that seemingly roll on top of the background. It’s pretty easy to go overboard.
The Risen Church website is a good example of how effective minimal layering can be. It was built using a custom theme. To begin, there’s a video background with a bold headline and link to a related article. But as you scroll, you’ll notice that the primary navigation for the sections on the homepage is sticky to the bottom of the viewport. From there, you’re greeted with more full-width images with overlaid text and links. There’s nothing really fancy going on here but the overall layout is effective and engaging. Plus, the navigation is familiar enough so as to not confuse visitors.
The “Be More Human Experience” on the Reebok website is another good example. While there isn’t so much depth of field illusions in play here, each scroll triggers a swipe effect. The background changes and new content slides in place. It’s dynamic and a bit untraditional, making the layers of content even more eye-catching.
Tools for the Job
If you want to implement parallax storytelling on your WordPress site, it’s a good idea to get familiar with how the whole concept works. Following a few basic tutorials will give you a sense of how all the parts go together. If you opt against building a site from scratch, you can always use a theme or plugin, but we’ll get to those in a moment.
Here are a few tutorials and helpful articles to check out:
- Pure CSS Parallax Websites — A nice tutorial for creating parallax effects using CSS exclusively.
- Andy Shora Tutorial — This one walks you through creating a parallax site using CSS and jQuery.
- A DIY Guide to Taking Your WordPress Storytelling to New Heights — If you liked that cover story I mentioned from Pitchfork magazine above, you’ll learn how to create one from scratch just like it right here.
- 15 Free Stunning WordPress Themes That Prove Parallax Isn’t Dead — A nice roundup from our very own Tom Ewer.
Now, onto the plugins and themes…
One of the best plugins around for adding parallax storytelling elements to your site right here. Aesop Story Engine makes it easy to insert thirteen different story components on your site with the ease of drag-and-drop. These components can be used in any combination to create a feature-rich, story-driven site and include things like media, characters, images, timelines, chapters, quotes, galleries, parallax lightboxes, maps, and more.
In addition to the free core plugin, they also offer storytelling themes designed to service various types of industries and individuals who might have a yarn to spin.
This plugin is really straightforward in that it adds a simple shortcode to your site that allows for the easy insertion of a parallax background or header. It can be implemented on one-page and multi-page sites and you can even add parallax scrolling to single elements of your site.
Parallax Scroll is lightweight and simply adds parallax to your theme for you to do with as you’d like. This is a good choice for those pretty adept at web design already but would just like to have a convenient code-free way to add simple parallax effects.
Another plugin to consider is called Parallax Gravity. It allows you to create one-page landing pages that are designed to encourage a visitor to go through the conversion process. With it, you can add different sections within a page, establish backgrounds, and insert different kinds of content using shortcodes. All punctuated by stylish parallax effects, of course.
A premium version is also available that adds customization support like custom CSS, keywords, QR codes, animation, and more. This version costs $17.
If you’re looking for a theme that includes parallax scrolling, here are a few to consider:
Shameless plug time: The latest version of our Upfront theme is enabled for parallax effects, which means you can drag-and-drop your way to a fully immersive story-driven site with a parallax header or background quickly.
It comes with a bunch of other features, too, like site sections, customizable regions, responsive design, starter themes, and more. You can get Upfront for $19/month by itself or with all WPMU DEV plugins and themes for $24.50 per month.
One of the sites used as an example in this article was created using Divi by Elegant Themes. This drag-and-drop site builder theme is robust in its feature set and offers a hands-on approach to site building. It offers a multitude of layout options, mobile responsiveness, drag-and-drop page elements, and parallax backgrounds.
To get Divi, you need an Elegant Themes membership, which starts at $69 per year.
Here’s a nice theme for building an agency or portfolio website that can be driven by parallax story elements. It’s the Simple Parallax Responsive Theme and it includes many features for building a mobile-friendly and engaging site like a fullscreen parallax slider, custom background images, custom menus, and more.
This theme currently costs $39.
What a lovely theme this is! Osmosis can be used to build any kind of site you want and comes with numerous features for creating a site that’s attractive right out of the box. Or, you can spend more time on customization if you want. It comes with stylish backend controls, dummy data, retina-ready and responsive design, a theme options panel, and Visual Composer is built right in.
Osmosis costs $59.
Another option is the Creative Agency WordPress Theme, which offers a really unique and compelling parallax effect for use on a business portfolio site. It has numerous scroll-triggered effects and animations that take advantage of the layering possibilities of parallax. And these animations can be customized with your own images, which can create a design that looks as though you hand coded the thing yourself.
Creative Agency WordPress Theme costs 39 Euros, which is about $44 from GavickPro.
The last theme I’ll mention here is called Rain. It’s a bit limited in what it can accomplish but if you’re set on telling a story—as in very literally a piece of fiction or non-fiction—this theme is a good choice. It’s a two-column setup that offers the title of the work on the lefthand side with an atmospheric visual rain effect and audio track to put your readers in the mood to read.
On the righthand side, the text of your story appears. And as the visitor scrolls, new chapters appear with a subtle parallax effect.
Rain will set you back $49.
I fully recognize that parallax design isn’t for everyone. But just because the style can be used badly, doesn’t mean you should avoid it. In fact, as a storytelling tool, parallax can be stunning and capture the visitor’s imagination in bold new ways. Which means it can be highly effective as a means of increasing site visits, return visits, and conversions, too.
Now I want to hear from you. Do you think parallax has a well-deserved place in site design or are you over it? What about as a storytelling tool? And what are some of your favorite examples? Sound off below.