topical media & game development

talk show tell print

lib-jquery-plugin-parallax-parallax-demos-target-files-jquery.js / js



  // jquery.jparallax.js
  // 0.9.1
  // Stephen Band
  //
  // Dependencies:
  // jQuery 1.2.6 (jquery.com)
  //
  // Project and documentation site:
  // http://webdev.stephband.info/parallax.html
  
  
  // CLOSURE
  
  (function(jQuery) {
  
  // PRIVATE FUNCTIONS
  
  function stripFiletype(ref) {
    var x=ref.replace('.html', '');
    return x.replace('#', '');
  }
  
  function initOrigin(l) {
    if (l.xorigin=='left')        {l.xorigin=0;}        else if (l.xorigin=='middle' || l.xorigin=='centre' || l.xorigin=='center')        {l.xorigin=0.5;}        else if (l.xorigin=='right')        {l.xorigin=1;}
    if (l.yorigin=='top')                {l.yorigin=0;}        else if (l.yorigin=='middle' || l.yorigin=='centre' || l.yorigin=='center')        {l.yorigin=0.5;}        else if (l.yorigin=='bottom')        {l.yorigin=1;}
  }
  
  function positionMouse(mouseport, localmouse, virtualmouse) {
  
    var difference = {x: 0, y: 0, sum: 0};
    
          // Set where the virtual mouse is, if not on target
    if (!mouseport.ontarget) {
      
      // Calculate difference
      difference.x    = virtualmouse.x - localmouse.x;
      difference.y    = virtualmouse.y - localmouse.y;
      difference.sum  = Math.sqrt(difference.x*difference.x + difference.y*difference.y);
      
      // Reset virtualmouse
      virtualmouse.x = localmouse.x + difference.x * mouseport.takeoverFactor;
      virtualmouse.y = localmouse.y + difference.y * mouseport.takeoverFactor;
      
      // If mouse is inside the takeoverThresh set ontarget to true
      if (difference.sum < mouseport.takeoverThresh && difference.sum > mouseport.takeoverThresh*-1) {
              mouseport.ontarget=true;
      }
    }
    // Set where the layer is if on target
    else {
      virtualmouse.x = localmouse.x;
      virtualmouse.y = localmouse.y;
    }
  }
  
  function setupPorts(viewport, mouseport) {
  
          var offset = mouseport.element.offset();
                  
    jQuery.extend(viewport, {
      width:                 viewport.element.width(),
      height:         viewport.element.height()
    });
    
    jQuery.extend(mouseport, {
      width:                mouseport.element.width(),
      height:                mouseport.element.height(),
      top:                        offset.top,
      left:                        offset.left
    });
  }
  
  function parseTravel(travel, origin, dimension) {
    
    var offset;
    var cssPos;
    
    if (typeof(travel) === 'string') {
      if (travel.search(/^\d+\s?px/) != -1) {
        travel = travel.replace('px', '');
        travel = parseInt(travel, 10);
        // Set offset constant used in moveLayers()
        offset = origin * (dimension-travel);
        // Set origin now because it won't get altered in moveLayers()
        cssPos = origin * 100 + '%';   
        return {travel: travel, travelpx: true, offset: offset, cssPos: cssPos};
      }
      else if (travel.search(/^\d+\s?%/) != -1) {
        travel.replace('%', '');
        travel = parseInt(travel, 10) / 100;
      }
      else {
        travel=1;
      }
    }
    // Set offset constant used in moveLayers()
    offset = origin * (1 - travel);
    return {travel: travel, travelpx: false, offset: offset}
  }
  
  function setupLayer(layer, i, mouseport) {
  
    var xStuff;
    var yStuff;
    var cssObject = {};
  
    layer[i]=jQuery.extend({}, {
            width:                layer[i].element.width(),
            height:                layer[i].element.height()
    }, layer[i]);
  
    xStuff = parseTravel(layer[i].xtravel, layer[i].xorigin, layer[i].width);
    yStuff = parseTravel(layer[i].ytravel, layer[i].yorigin, layer[i].height);
  
    jQuery.extend(layer[i], {
            // Used in triggerResponse
            diffxrat:    mouseport.width / (layer[i].width - mouseport.width),
            diffyrat:    mouseport.height / (layer[i].height - mouseport.height),
            // Used in moveLayers
            xtravel:     xStuff.travel,
            ytravel:     yStuff.travel,
            xtravelpx:   xStuff.travelpx,
            ytravelpx:   yStuff.travelpx,
            xoffset:     xStuff.offset,
            yoffset:     yStuff.offset
    });
    
    // Set origin now if it won't be altered in moveLayers()
    if (xStuff.travelpx) {cssObject.left = xStuff.cssPos;}
    if (yStuff.travelpx) {cssObject.top = yStuff.cssPos;}
    if (xStuff.travelpx || yStuff.travelpx) {layer[i].element.css(cssObject);}
  }
  
  function setupLayerContents(layer, i, viewportOffset) {
  
    var contentOffset;
  
    // Give layer a content object
    jQuery.extend(layer[i], {content: []});
    // Layer content: get positions, dimensions and calculate element offsets for centering children of layers
    for (var n=0; n<layer[i].element.children().length; n++) {
            
            if (!layer[i].content[n])          layer[i].content[n]             = {};
            if (!layer[i].content[n].element)  layer[i].content[n]['element']  = layer[i].element.children().eq(n);
            
            // Store the anchor name if one has not already been specified.  You can specify anchors in Layer Options rather than html if you want.
      if(!layer[i].content[n].anchor && layer[i].content[n].element.children('a').attr('name')) {
              layer[i].content[n]['anchor'] = layer[i].content[n].element.children('a').attr('name');
            }
            
            // Only bother to store child's dimensions if child has an anchor.  What's the point otherwise?
            if(layer[i].content[n].anchor) {
        contentOffset = layer[i].content[n].element.offset();
                    jQuery.extend(layer[i].content[n], {
                            width:                 layer[i].content[n].element.width(),
                            height:                layer[i].content[n].element.height(),
                            x:                          contentOffset.left - viewportOffset.left,
                            y:                          contentOffset.top - viewportOffset.top
                    });
                    jQuery.extend(layer[i].content[n], { 
                      posxrat:  (layer[i].content[n].x + layer[i].content[n].width/2) / layer[i].width,
                      posyrat:  (layer[i].content[n].y + layer[i].content[n].height/2) / layer[i].height
        });
            }
    }
  }
  
  function moveLayers(layer, xratio, yratio) {
  
          var xpos;
          var ypos;
          var cssObject;
          
          for (var i=0; i<layer.length; i++) {
      
      // Calculate the moving factor
            xpos = layer[i].xtravel * xratio + layer[i].xoffset;
      ypos = layer[i].ytravel * yratio + layer[i].yoffset;
      cssObject = {};
            // Do the moving by pixels or by ratio depending on travelpx
      if (layer[i].xparallax) {
        if (layer[i].xtravelpx) {
          cssObject.marginLeft = xpos * -1 + 'px';
        } 
        else {
          cssObject.left = xpos * 100 + '%';
          cssObject.marginLeft = xpos * layer[i].width *-1 + 'px';
        }
            }
            if (layer[i].yparallax) {
        if (layer[i].ytravelpx) {
          cssObject.marginTop = ypos * -1 + 'px';
        }
        else {
          cssObject.top = ypos * 100 + '%';
          cssObject.marginTop = ypos * layer[i].height * -1 + 'px';
        }
      }
      layer[i].element.css(cssObject);
          }
  }
  
  // PLUGIN DEFINITION **********************************************************************
  
  jQuery.fn.jparallax = function(options) {
          
          // Organise settings into objects (Is this a bit of a mess, or is it efficient?)
          var settings = jQuery().extend({}, jQuery.fn.jparallax.settings, options);
          var settingsLayer = {
                            xparallax:                                settings.xparallax,
                            yparallax:                                settings.yparallax,
                            xorigin:                                        settings.xorigin,
                            yorigin:                                        settings.yorigin,
                            xtravel:          settings.xtravel,
                            ytravel:          settings.ytravel
                    };
    var settingsMouseport = {
                            element:                                        settings.mouseport,
                                  takeoverFactor:                settings.takeoverFactor,
                                  takeoverThresh:                settings.takeoverThresh
                          };
          if (settings.mouseport) settingsMouseport['element'] = settings.mouseport;
          
          // Populate layer array with default settings
          var layersettings = [];
          for(var a=1; a<arguments.length; a++) {
                  layersettings.push( jQuery.extend( {}, settingsLayer, arguments[a]) );
          }
          
          // Iterate matched elements
          return this.each(function() {
  
      // VAR
      
                  var localmouse = {
                                          x:                                0.5,
                                          y:                                0.5
                  };
                  
      var virtualmouse = {
                                          x:                                0.5,
                                          y:                                0.5
                  };
                  
                  var timer = {
                    running:                false,
                    frame:                        settings.frameDuration,
                    fire:                                function(x, y) {
                                                                positionMouse(mouseport, localmouse, virtualmouse);
                      moveLayers(layer, virtualmouse.x, virtualmouse.y);
                                                                this.running = setTimeout(function() {
                                                                        if ( localmouse.x!=x || localmouse.y!=y || !mouseport.ontarget ) {
                                                                                timer.fire(localmouse.x, localmouse.y);
                                                                        }
                                                                        else if (timer.running) {
                                                                                timer.running=false;
                                                                        }
                                                                }, timer.frame);
                                                              }
                  };
  
                  var viewport        =        {element: jQuery(this)};                
  
                  var mouseport = jQuery.extend({}, {element: viewport.element}, settingsMouseport, {
                    xinside:          false,                // is the mouse inside the mouseport's dimensions?
                          yinside:                false,
                          active:                        false,                // are the mouse coordinates still being read?
                          ontarget:         false                        // is the top layer inside the takeoverThresh?
                  });
      
                  var layer                        = [];
      
      // FUNCTIONS
      
      function matrixSearch(layer, ref, callback) {
        for (var i=0; i<layer.length; i++) {
          var gotcha=false;
          for (var n=0; n<layer[i].content.length; n++) {
            if (layer[i].content[n].anchor==ref) {
              callback(i, n);
              return [i, n];
            }
          }
        }
        return false;
      }
      
      // RUN
      
      setupPorts(viewport, mouseport);
                  
                  // Cycle through and create layers
      for (var i=0; i<viewport.element.children().length; i++) {
                          // Create layer from settings if it doesn't exist
                          layer[i]=jQuery.extend({}, settingsLayer, layersettings[i], {
                                  element:        viewport.element.children('*:eq('+i+')')
                          });
                          
                    setupLayer(layer, i, mouseport);
        
        if (settings.triggerResponse) {
                      setupLayerContents(layer, i, viewport.element.offset());
                    }
                  }
                  
                  
      
      // Set up layers CSS and initial position
      viewport.element.children().css('position', 'absolute');
                  moveLayers(layer, 0.5, 0.5);
                  
                  // Mouse Response
                  if (settings.mouseResponse) {
                          jQuery().mousemove(function(mouse){
                                  // Is mouse inside?
                                  mouseport.xinside = (mouse.pageX >= mouseport.left && mouse.pageX < mouseport.width+mouseport.left) ? true : false;
                                  mouseport.yinside = (mouse.pageY >= mouseport.top  && mouse.pageY < mouseport.height+mouseport.top)  ? true : false;
                                  // Then switch active on.
                                  if (mouseport.xinside && mouseport.yinside && !mouseport.active) {
                                          mouseport.ontarget = false;
                                          mouseport.active = true;
                                  }
                                  // If active is on give localmouse coordinates
                                  if (mouseport.active) {
                                          if (mouseport.xinside) { localmouse.x = (mouse.pageX - mouseport.left) / mouseport.width; }
                                          else { localmouse.x = (mouse.pageX < mouseport.left) ? 0 : 1; }
                                          if (mouseport.yinside) { localmouse.y = (mouse.pageY - mouseport.top) / mouseport.height; } 
                                          else { localmouse.y = (mouse.pageY < mouseport.top) ? 0 : 1; }
                                  }
                                  
                                  // If mouse is inside, fire timer
                                  if (mouseport.xinside && mouseport.yinside)  { if (!timer.running) timer.fire(localmouse.x, localmouse.y); }
                                  else if (mouseport.active) { mouseport.active = false; }                        
                          });
                  }
                  
                  // Trigger Response
                  if (settings.triggerResponse) {
                    viewport.element.bind("jparallax", function(event, ref){
                      
                      ref = stripFiletype(ref);
                            
          matrixSearch(layer, ref, function(i, n) {
            localmouse.x = layer[i].content[n].posxrat * (layer[i].diffxrat + 1) - (0.5 * layer[i].diffxrat);
            localmouse.y = layer[i].content[n].posyrat * (layer[i].diffyrat + 1) - (0.5 * layer[i].diffyrat);
    
            if (!settings.triggerExposesEdges) {
              if (localmouse.x < 0) localmouse.x = 0;
              if (localmouse.x > 1) localmouse.x = 1;
              if (localmouse.y < 0) localmouse.y = 0;
              if (localmouse.y > 1) localmouse.y = 1;
            }
            
            mouseport.ontarget = false;
            
            if (!timer.running) timer.fire(localmouse.x, localmouse.y);
          });
                    });
                  }
                  
                  // Window Resize Response
                  jQuery(window).resize(function() {
  
                    setupPorts(viewport, mouseport);
                    for (var i=0; i<layer.length; i++) {
                      setupLayer(layer, i, mouseport);
        }
                  });
                  
                  
          });
  };
  
  // END OF PLUGIN DEFINITION **********************************************************************
  
  // PLUGIN DEFAULTS
  
  jQuery.fn.jparallax.settings = {
          mouseResponse:                    true,                                                // Sets mouse response
          mouseActiveOutside:                false,                                        // Makes mouse affect layers from outside of the mouseport. 
          triggerResponse:            true,                                          // Sets trigger response
    triggerExposesEdges:  false,          // Sets whether the trigger pulls layer edges into view in trying to centre layer content.
          xparallax:                                    true,                                                // Sets directions to move in
          yparallax:                                    true,                                                //
          xorigin:                                            0.5,                                    // Sets default alignment - only comes into play when travel is not 1
          yorigin:                                            0.5,                                    //
          xtravel:              1,              // Factor by which travel is amplified
          ytravel:              1,              //
          takeoverFactor:                    0.65,                                                // Sets rate of decay curve for catching up with target mouse position
          takeoverThresh:                    0.002,                                        // Sets the distance within which virtualmouse is considered to be on target, as a multiple of mouseport width.
          frameDuration:        25                                                        // In milliseconds
  };
  
  // RUN
  
  initOrigin(jQuery.fn.jparallax.settings);
  
  jQuery(function() {
          
  });
  
  // END CLOSURE
  
  })(jQuery);


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.