parallax

Why you Should use Parallax Scrolling Technology in Website and Game Design

One of the hottest graphic trends on the internet right now is parallax scrolling technology, where the background of the screen moves slower than the foreground, creating a 3D effect. It is a unique way to make optical experiences that are traditionally 2D more aesthetically pleasing and engaging. The method has been around for a while and was used a lot on the simple games of the 1980s like Super Mario. Now with more advanced technology available, these effects are enjoying a renaissance and a number of games and websites are using them to enhance their appeal.

interstellar-force
Interstellar Force: Nebula” (CC BY 2.0) by David994A

Games

The first video game to use parallax scrolling came out in 1982 with the arcade game Moon Patrol in which players controlled a moon buggy fighting alien ships. In the classic platform games of the 80s like Mario, Sonic the Hedgehog and Donkey Kong, parallax scrolling effects were put to good use to make it seem as though the character was moving along the 2D landscape. Now, this idea has been expanded upon and modernized using up-to-date graphics engines that can create some stunning images.

via GIPHY

In the online world, the latest parallax scrolling technology has been mostly used by iGaming providers which want to add further spice to their already glittering slot machine designs. Microgaming, a software developer that produces games for online casinos on desktop and mobile devices, was the pioneering company to bring parallax scrolling to the slot machine world. The company won the Digital Product of the Year award in 2015 for its Jurassic Park slot game, which was the first of its kind to incorporate the technology.

Online casinos that partner with Microgaming have reaped the rewards of housing a game which is at the forefront of the slot machine revolution. For instance, the Jurassic Park game is part of 32Red’s online slot catalogue and the glitzy appeal of the game serves as a good introduction to newcomers who are unfamiliar with slots, or pokies as they are colloquially referred to Down Under. Once players have been drawn by the uniquely animated jungle, they’re bound to look for other classic pokies based on films such as The Dogfather (not a typo!) or Hitman.

Because other online casinos like Emu Casino and Jackpot City Casino also host the popular slot game, each site tries to outdo each other with their bonuses. For example, 32Red has a Red Letter Day bonus where lucky depositors can receive free cash up to $250, Emu Casino offers free spins, and Jackpot City gives players a first-time deposit match bonus.

Websites

The innovative parallax technology has had a major impact on early platform games and the online casino sector, but it doesn’t have to be restricted to games as it can also be used to make normal websites stand out from the crowd and gain more traffic. A landing page that uses the effects can bombard the reader with pictures and information about the site without the user even having to scroll down and see for themselves. With the vast quantity of websites out there for users to flick between, it is imperative to capture people’s attention instantly.

via GIPHY

Alex Black of Creative Bloq believes that parallax is still a hot technique, but must be implemented with moderation: “When it is used sparingly, it can provide a nice, subtle element of depth.”

Even novice web designers can easily create great effects with the help of tutorials by front-end developers like Petr Tichy. Amateurs can download pre-made plugins and apply them without even having to use Flash. The coding is straightforward, just use a container element and add a background image to the container with a specific height. Then use “background-attachment: fixed” to create the parallax effect. Installing the effects is easy enough, but if you have any difficulties professional web designers can help. From a creative viewpoint- in which situations would they best be applied?

Food websites could make excellent use of these advanced graphics. For instance, the pages at Menulog – an Australian online food delivery service – look great. There are a few mouth-watering pictures of meals to get customers’ taste buds tingling on the homepage, but then users have to scroll down to select a certain type of food and choose from a list of options that is slightly less easy on the eye. Parallax scrolling effects could add a whole new dimension to sites like these if they included pictures of tantalizing meals flashing across the page continuously on the site’s landing page. The same could be done with clothes, groceries, or holiday resorts – you name it.

Parallax scrolling technology is certainly worth exploring, but if you are a game or website developer you may want to jump on the trend while it’s still hot. Remember, it should be subtle enough not to seem overdone, but also immersive enough to create a stunning 3D experience.

Featured Image: Pi’s Epic Journey

One Comment
  1. Reply Devin October 29, 2016 at 6:50 PM

    Parallax effects can make your website stand out to an extent but I’ve recently become aware of the load that excessive scripting can put on a user’s browser (and overall computer system, I guess). While I don’t think I’ll be giving it up entirely just yet, I’m definitely looking at ways to cut down overuse of scripts in general – trying to get that awesome UX flow going!
    Web Design Durban,
    Devin

Leave a Reply