Tags

, , , ,

jQuery Parallax 0.2 – Minor updates

by dom111 on July 30th, 2009

So I’ve updated the parallax script a little. It’s called in a more jQuery like manner now and has a couple of useful options for inverting the movement and changing the unit of measurement to any jQuery/CSS supported unit.

Example code:

$('div.parallax').parallax({
  'elements': [
    {
      'selector': 'body',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.1,
            'invert': true
          }
        }
      }
    },
    {
      'selector': 'div.outer',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 50,
            'multiplier': 0.02,
            'unit': '%'
          }
        }
      }
    },
    {
      'selector': 'div.inner',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.3
          }
        }
      }
    }
  ]
});

You can see a demo of the updated script, or just download the package (includes jQuery 1.3.2).

From Coding, Javascript, User Interaction, jQuery

4 Comments →
  1. quickredfox permalink

    I’ve had to make a minor change to your code in order to make untouched y and x axis remain untouched… probably not the best way but here’s what I did:

              var coords = $(options.elements[i].selector).css('backgroundPosition').split(' ');
          opts['background-position'] = '' + (('background-position-x' in opts) ? opts['background-position-x'] : coords[0]) + ' ' + (('background-position-y' in opts) ? opts['background-position-y'] : coords[1]);

    around the “fix for firefox”

    Reply
    • dom111 permalink

      That looks like a pretty robust solution… Was that for a particular browser? I do most of my testing in WebKit so I do tend to neglect the others on occasion…

      Reply
  2. Colir permalink

    Hi dom
    Thanks for this plugin, it’s really efficient !
    I’ve just one sugges:
    Change the :
    ” $((options.useHTML) ? ‘html’ : this).mousemove(function(e) { ”
    by :
    ” $((options.useHTML) ? ‘html’ : this).bind(‘mousemove’,(function(e) { ”

    With the bind event we have an easy way to stop the parallax effect by using unbind()

    This can be usefull in certain case

    thanks again for this plug !

    Reply
    • dom111 permalink

      Hi Colir,

      That’s not a bad improvement! If I make a future version, I’ll be sure to append the function like this. The .mousemove() and .click() handlers are nice and easy to set up the prototype, so it’s mainly laziness that means I haven’t changed it :)

      Thanks!

      Dom

      Reply

Leave a Reply

Note: XHTML is allowed. Your email address will never be published.

Subscribe to this comment feed via RSS