JQuery Parallax: Background Effects for your Website

jquery collapsible panelWhen you’re thinking about graphics for your site, it’s sometimes easy to forget about making the background an integral part of the design. I’ve seen many sites that feature wonderful images and moving graphics, but the background remains bland and uninteresting.

It doesn’t have to be that way, and this is where jQuery Parallax can be used to great effect. Parallax in fact is just one tool that can really enhance your website design, and if you’re looking to take dynamic web design seriously it’s something you should learn how to do. Dynamic website design is featured on a great course about learning dynamic website design, and is well worth investigating.

What is JQuery Parallax?

JQuery Parallax is a plugin for jQuery that allows you to easily insert effects into your website background, usually for when a user is scrolling up and down the page. By using effects such as sliders and animations, your pages won’t look quite so static, and will give a fluid feel to the end user. This in turn makes their whole “web-experience” more enjoyable, and if your website users are happy, they are more likely to stay.

It’s relatively simple to use jQuery Parallax on your site, you just need to add in some code and learn about all the different options. In fact there are a number of jQuery Parallax plugins that do slightly different things, such as slightly moving the background as you scroll. You can add this your site using a plugin, and usually there will be somewhere to easily change the basic parameters. If however we look at what’s going on behind the scenes, we might see this:

$('[data-type]').each(function() {
 $(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
 $(this).data('Xposition', $(this).attr('data-Xposition'));
 $(this).data('speed', $(this).attr('data-speed'));
 });

These parameters in the jQuery plugin determine how quickly the background of your page will scroll compared to the text.

Other Cool Background Tricks You Can Wo with JQuery Parallax

You can also have dual backgrounds. Well… in fact you can have multiple backgrounds, but the more you have the more complex it will be to co-ordinate everything, and more likely something will break.  You can get some tutorials on various different jQuery plugins on the UI Widgets course at Udemy, and that will give you some inspiration and ideas on what you can do.  Parallax effects can consist of:

  • Sliding pages
  • Scrolling backgrounds
  • Multiple backgrounds
  • Transforming backgrounds (skewing, scaling, rotating, that sort of thing)
  • Fading backgrounds
  • Merging backgrounds

Or you can do combine two or more of these to make other effects. For example, you could have a photo sliding in the from the right, and then fading at a set interval, and then another photo slides in from another angle.

A popular technique is to have two backgrounds with different content, and each one scrolls at a slightly different speed. One background would be set to overlay the other, so as you scroll parts of the background is either hidden or revealed.

JQuery Parallax on the Move

JQuery Parallax is a great way to make mobile websites a little more snazzy. I’m talking about the pages you might see on a smartphone version of a website. You have much less real estate on the screen to play with, so the trick is to be creative. Using a jQuery Parallax plugin you can have the background shift as the user scrolls, and sometimes you can have the background move slightly as the phone is tilted up or down, left or right. Now that is seriously cool, and the sort of thing a user might show a friend. “hey! Look at what this site is doing”  Check out these tips too on how to make great mobile compatible websites.

 JQuery Parallax Coding Tips

Part of the reason you might want to use a parallax scrolling effect is to have the background scroll at a different speed to the text. So for this you might use a multiplier. This would be a percentage. So say you want the background to scroll at half speed, you might use code like this:

function parallax(){
 var scrolled = $(window).scrollTop();
 $('.bg').css('top', -(scrolled * 0.5) + 'px');
 }

The 0.5 value you see is a percentage figure, so 0.5 is 50%. If you want the background to scroll faster, then use a higher percentage such as 0.75, or slower use 0.2 or 0.1. Most of this will be trial and error to get the desired effect, but it’s worth taking the time and effort to get it just right.

Another clever idea is to have two backgrounds moving ever so slightly differently to each other. This creates a sort of 3D effect. For this you need to similar background images, and the coding would look something like this (each background image would have to be already defined in CSS code):

$(document).ready(function(){
 $('section[data-type="background"]').each(function(){
 var $bgobj = $(this);
$(window).scroll(function() {
 var yPos = -($window.scrollTop() / $bgobj.data('speed'));
 //
 var coords = '50% '+ yPos + 'px';
 // Move the background
 $bgobj.css({ backgroundPosition: coords });
 });
 });
 });

For more tricks and tips specifically on jQuery effects, you could try looking at the in-depth jQuery course for beginners. As well as complete guides on setting up your code, you can use this to get inspiration on which effects to use, and how they can enhance your site.

One Final Tip

They used to say that the sign of a good painter is knowing when to stop. Remember that you don’t need to use every jQuery effect on every single page of your site. To be honest, this would be an overload for your website users. Use effects like jQuery parallax wisely and sparingly, and you can’t really go wrong. One last place to learn more about jQuery and parallax is on the Master Javascript and jQuery course. Go out there and be creative!!