Posted By

dom111 on 09/15/10


Tagged

css javascript jquery Parallax


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

jearley
verostudios


jQuery Parallax


 / Published in: jQuery
 

URL: http://www.dom111.co.uk/blog/coding/jquery-parallax-0-2-minor-updates/125

I’ve seen some very cool parallax effect around lately, especially liking the Silverback site. But none of them are particularly interactive, so I thought I’d make a small implementation of the Parallax effect that interacts with the mouse.

Very early stages (and I haven’t tested it on IE yet… but you could just you conditional comments to exclude ‘those’ people anyway…) but it seems to be working ok. The options aren’t really simple, but they should be fairly self-explanatory…

  1. /**
  2.  * Parallax 0.2
  3.  *
  4.  * Add a simple parallax effect to a page
  5.  *
  6.  * Requires jQuery. Tested with v1.3.2.
  7.  *
  8.  * options: object, Contains all the options required to run the parallax effect:
  9.  * options.useHTML: boolean, If set to true the script will use the HTML element
  10.  * instead of the container to capture mousemove events
  11.  * options.elements: array, An array of objects of the following structure:
  12.  * {
  13.  * 'selector': 'div.test',
  14.  * 'properties': {
  15.  * 'x': {
  16.  * 'left': {
  17.  * 'initial': 0,
  18.  * 'multiplier': 0.1,
  19.  * 'invert': true,
  20.  * 'unit': 'px',
  21.  * 'min': -160,
  22.  * 'max': 160
  23.  * }
  24.  * },
  25.  * 'y': {
  26.  * 'top': {
  27.  * 'initial': 0,
  28.  * 'multiplier': 0.1,
  29.  * 'invert': false,
  30.  * 'unit': 'px',
  31.  * 'min': 90,
  32.  * 'max': 110
  33.  * }
  34.  * }
  35.  * }
  36.  * }
  37.  *
  38.  * options.elements[n].selector: string, The jQuery selector for the element
  39.  * options.elements[n].properties: object, Contains 'x' and 'y' keys for the properties
  40.  * that are affected by either horizontal, or vertical movement respectively
  41.  * options.elements[n].properties[x || y]: object, Contains keys relating to the CSS
  42.  * property to be changed on movement
  43.  * options.elements[n].properties[x || y][cssProperty]: object, Must contain at least
  44.  * two keys 'initial' and 'multiplier'.
  45.  * 'initial' is the starting point for the property and 'multiplier' is used to create
  46.  * the parallax effect. For example to have the element property move exactly with the
  47.  * mouse cursor you'd use 1, lower values move less...
  48.  * 'min' and 'max' should be fairly self explanetory, the value will be prevented from
  49.  * deviating beyond these boundaries (both are optional)
  50.  * 'unit' is also optional unit of measurement (the default is 'px')
  51.  * 'invert' is also an optional boolean, if true, the number will be negated
  52.  *
  53.  * Free to use anywhere for anything, but I'd love to see what anyone does with it...
  54.  *
  55.  * dom111.co.uk
  56.  *
  57.  * Changelog:
  58.  * 0.2
  59.  * Added an optional unit and invert paramter to each item
  60.  * Turned the function into a jQuery plugin
  61.  *
  62.  * 0.1
  63.  * Initial release
  64.  */
  65. (function($) {
  66. $.fn.parallax = function(options) {
  67. // options
  68. var options = $.extend({
  69. // useHTML: use the whole document as a listener
  70. 'useHTML': true,
  71. // elements: the elements to manipulate
  72. 'elements': []
  73. }, options || {});
  74.  
  75. // attach the mousemove event to the specified element
  76. $((options.useHTML) ? 'html' : this).mousemove(function(e) {
  77. // set up the element as a variable
  78. var el = $(this);
  79.  
  80. // calculate the center
  81. var center = {
  82. 'x': Math.floor(parseInt(el.width()) / 2),
  83. 'y': Math.floor(parseInt(el.height()) / 2)
  84. }
  85.  
  86. // the the cursor's position
  87. var pos = {
  88. 'x': (e.pageX - el.offset().left),
  89. 'y': (e.pageY - el.offset().top)
  90. }
  91.  
  92. // calculate the offset
  93. var offset = {
  94. 'x': (pos.x - center.x),
  95. 'y': (pos.y - center.y)
  96. }
  97.  
  98. // loop through all the elements
  99. for (var i = options.elements.length - 1; i >= 0; i--) {
  100. // set up a container for the properties
  101. var opts = {}, value, p;
  102.  
  103. // loop through all the properties specified
  104. for (var property in options.elements[i].properties.x) {
  105. // store the objet in a nicer variable
  106. p = options.elements[i].properties.x[property];
  107.  
  108. // set the value
  109. value = p.initial + (offset.x * p.multiplier);
  110.  
  111. // check that the value's within the bounds
  112. if ('min' in p && value < p.min) {
  113. value = p.min;
  114.  
  115. } else if ('max' in p && value > p.max) {
  116. value = p.max;
  117. }
  118.  
  119. // invert the value if required
  120. if ('invert' in p && p.invert) {
  121. value = -(value);
  122. }
  123.  
  124. // check if a unit has been specified
  125. if (!('unit' in p)) {
  126. p.unit = 'px';
  127. }
  128.  
  129. // append it
  130. opts[property] = value + p.unit;
  131. }
  132.  
  133. for (var property in options.elements[i].properties.y) {
  134. p = options.elements[i].properties.y[property];
  135.  
  136. value = p.initial + (offset.y * p.multiplier);
  137.  
  138. if ('min' in p && value < p.min) {
  139. value = p.min;
  140.  
  141. } else if ('max' in p && value > p.max) {
  142. value = p.max;
  143. }
  144.  
  145. if ('invert' in p && p.invert) {
  146. value = -(value);
  147. }
  148.  
  149. if (!('unit' in p)) {
  150. p.unit = 'px';
  151. }
  152.  
  153. opts[property] = value + p.unit;
  154. }
  155.  
  156. // fix for firefox
  157. if ('background-position-x' in opts || 'background-position-y' in opts) {
  158. opts['background-position'] = '' + (('background-position-x' in opts) ? opts['background-position-x'] : '0px') + ' ' + (('background-position-y' in opts) ? opts['background-position-y'] : '0px');
  159.  
  160. delete opts['background-position-x'];
  161. delete opts['background-position-y'];
  162. }
  163.  
  164. // here's the magic! simples!
  165. $(options.elements[i].selector).css(opts);
  166. };
  167. });
  168. }
  169. })(jQuery);

Report this snippet  

You need to login to post a comment.