Parallax effects are interactive by nature and still relatively new in web design. That’s why they are a great way to make your visitors curious, draw them in, and engage them with your website. On the web, as much as in the real world, we are quite cautious and like to be in control. At times, we are uncertain and appreciate instant feedback on our actions. We are curious and love to experience new things. Parallax effects, whether triggered by scrolling or hovering, answer to all of these needs.
- Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight.
If we look at a close object from two different viewpoints, and against a distant background, we get a different perspective for each viewpoint. Since close objects have a larger parallax than more distant objects, the parallax effect can be used not only to measure distance between two objects, but also to create a sense of depth on a screen.
A while back we talked about parallax effects triggered by scrolling. Now, let’s take a look at parallax hovering effects and how they can add to the engaging quality of your website.
Attract your visitors’ attention
Regarding the visual and animated nature of parallax effects, they are a great way to attract attention. Guide your visitor’s line of sight and draw their attention towards your main message, or your call to action.
On the site of Grab&Go parallax effects are used in a very subtle way and only in a small area of the site. When moving your mouse, the different skylines in the background move, guiding your line of sight directly to the main headline of the site. The moving background creates a realistic scene, inviting you right in.
On the site of Johan Reinold parallax hovering draws attention to the main call to action button. The site promotes the music track “Tears from the start” and encourages visitors to watch the video. The entire area of the website above the fold is held very minimalistic. A soon as you move your mouse, the only visual element starts to move, drawing both your attention and your mouse to the central Play button.
Create a sense of depth
Parallax effects already imply the perception of depth. So why not use them to create a 3D effect on your site and for adding some excitement to your design.
The site of the new Batman movie in 3D uses the parallax effect to grant a realistic sneak peak of the movie. The overall design is very dark, visual and realistic. When hovering over the small screen that is placed centrally on the site, the images start to move, creating an even more realistic impression.
The agency for online brand communication Digital Hands applies the parallax effect to their site for more excitement and to make a memoralble impression. The design is not only beautiful, the 3D effect lets you think that the woman is actually standing in a room, surrounded by flying milk drops. The site becomes engaging, fun, and dynamic through the parallax effects.
Entertain your visitors
The web designer Aleksandar Grkinic has chosen for a playful and fun design for his homepage. When moving your mouse, you can put the entire screen in action, making the little puppets move around. There is no functionality linked to this interaction and neither does it lead to anything. Still, it is fun and engaging to just let the cute illustrations move around the screen.
Never mind the bullets is an interactive comic book that responds to your mouse movement. You can move your mouse back and forth and explore the story in your own pace.
Engage your visitors
The header of your website is an important part of your design. It’s one of the first things people see and it’s usually where we first look for orientation — both for the purpose of a site and the navigation menu. By making your header engaging for your users, chances are good they will enter your site.
The site for the game The Beatles Rock Band uses the parallax effect to engage their visitors. When hovering over the header, the illustrations start to move in response. This interaction doesn’t add much to the site, except for a fun engagement, which triggers positive emotions and motivates to further explore the site.
On the site Designus the interactive header has a similar effect. When hovering over the header, the already beautiful design becomes even more special and almost enchanting. The interactive design not only animates visitors to try out how far the parallax effect goes, but also to find out what else the site has to offer.
Just for fun
While parallax effects can fulfill all different kinds of purposes on your site, you can also use them just for fun. By adding an unexpected interactive animation to your site, you can surprise your visitors and stand out from the crowd. We are much more likely to remember a positive experience — even if irrelevant to our goals — than for example finding information efficiently.
The site xhtml is clear, but playful, which makes it special. The parallax effect when hovering over the header area adds to the playfulness of the design, while keeping up a professional and clean appearance.
The design agency Muffi.pl uses parallax hovering to highlight their projects. For every project, different elements move around the site, creating a fresh and fun sphere around each project. In this example, the main topic of the project was: coffee.
How it works
Here you have it — 10 examples that show how parallax hovering can help to make your site more engaging, more realistic, and more fun. Now, let’s take a quick look at how to implement these effects.
The idea behind the parallax effect is to translate the perceived proportions and distance of real world objects to the screen in order to create a sense of depth. When changing our point of view, objects that are further away move differently than objects that are closer.
On dzyngiri.com I found a nice tutorial that shows how to create a parallax hovering effect using ‘gliding divs’ and the jParallax plugin. On http://medleyweb.com/ there is a whole list of 15 useful jquery parallax pugins and tutorials. And on Speckyboy you can find another great article with examples of the parallax effect. Towards the end of the article, you can also find a couple of very handy tutorials.