topical media & game development

talk show tell print

lib-jquery-plugin-parallax-parallax.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <title>webdev.stephband.info</title>
  
  <link rel="icon" type="image/png" href="http://webdev.stephband.info/images/favicon.png">
  
  <style type="text/css" media="screen, projection">
  
    @import "lib-jquery-plugin-parallax-css-reset.css";
    @import "lib-jquery-plugin-parallax-css-typography.css";
    @import "lib-jquery-plugin-parallax-css-style-light.css";
    
    #parallax
      {position:relative; overflow:hidden; width:60em; height:20em;}
      
    #pullnav
      {position: absolute; top:0; left:648px; width:240px; padding-left:18px; padding-right:18px; padding-top:12px; padding-bottom:10px;
       background: url('images/bg_pulldown.png') bottom;}
    #housing
      /*{height:0px;}*/
    #contact
      {margin-right:0.5em; }
      
    #pullnav a:focus, #pullnav a:hover
      {color: #222222; text-decoration: none;}
    #pullnav a
      {color: #505050;}
    #pullnav form textarea
      {width:240px; height:80px;}
    #pullnav #donate input
      {margin: 0 1.2em;}
    #pullnav #donate
      {display:none;}
    #pullnav #message
      {display:none;}
    #pullnav #message .website
      {display:none;}
    #pullnav .error
      {color:        #7d4819;}  
  
  </style>
  
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-files-jquery-1.js"></script>
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-files-jquery.js"></script>
  <script type="text/javascript" src="lib-jquery-plugin-parallax-parallax-files-email.js"></script>
  <script type="text/javascript">
  <!--
  
    // jQuery.noConflict();
    
    // VAR
    
    var inPullNav = false;  
    
    // RUN
    
    var corners = '<img src="images/corner_white_tl.png" class="tl" />'+
                                                            '<img src="images/corner_white_tr.png" class="tr" />'+
                                                            '<img src="images/corner_white_bl.png" class="bl" />'+
                                                            '<img src="images/corner_white_br.png" class="br" />';
    
    jQuery(document).ready(function(){
    
      //jQuery('h1').html('<img src="images/logo_stephband_medcoalblue.png" />');
    
            jQuery('#parallax').jparallax({}).append(corners);
            
            jQuery('#beer').click(function(){
        jQuery('#housing').animate({height: "3em"}, 120).children('#donate').show().siblings().hide();
      });
      
            jQuery('#contact').click(function(){
        jQuery('#housing').animate({height: 140}, 120).children('#message').show().siblings().hide();
      });
      
      jQuery('#pullnav input, #pullnav textarea').focus(function(){inPullNav = true;}).blur(function(){inPullNav = false;});
      
      jQuery('#pullnav').hover(function(){}, function(){
          if (!inPullNav) {
          jQuery('#housing').animate({height: 0}, 500).children().hide();
          }
      });
      
      jQuery('#contact').hover(
        function(){
          jQuery('#contact img').attr({src: "images/icon_letter_on.png"});
        },
        function(){
          jQuery('#contact img').attr({src: "images/icon_letter.png"});
        }
      );
      
      jQuery('#beer').hover(
        function(){
          jQuery('#beer img').attr({src: "images/icon_beer_on.png"});
        },
        function(){
          jQuery('#beer img').attr({src: "images/icon_beer.png"});
        }
      );
      
      jQuery('body').click(function(){
        //jQuery('#donate').hide();
      });
            
    });
  
  //-->
  </script>
  
  <!--[if lt IE 7]>
  <script type="text/javascript" src="js/jquery.ifixpng.js"></script>
  <script type="text/javascript">jQuery(document).ready(function(){ jQuery('img[@src=.png]').ifixpng(); });</script>
  <![endif]-->
  <!--[if lt IE 8]>
  <style type="text/css">
  @import "css/style_ie.css";
  </style>
  <![endif]-->
  
  </head><body>
  
  <div id="header">
    <a href="http://webdev.stephband.info/index.html"><h1><img src="lib-jquery-plugin-parallax-parallax-files-logo-stephband-medcoalblue.png"></h1></a>
  </div>
  
  <div id="content">
  
    <h2>jParallax</h2>
    
    <h3>Download</h3>
    <ul>
      <li><a href="http://webdev.stephband.info/js/jquery.jparallax.js">jquery.jparallax.js</a> [11k] 0.9.9 BETA</li>
      <li><a href="http://webdev.stephband.info/js/jquery.jparallax.js">jquery.jparallax.js</a> [13k] 0.9.1 BETA</li>
    </ul>  
    <p>jParallax
  has had a major overhaul in readiness to be released as version 1.0!
  Layers are now freezable – the last feature I wanted to implement – and
  the code is more j and compact. I've been really encouraged by all the
  great comments, so thank you everyone! I just need you to road test the
  demos and tell me that it's still working in your browser, and then
  I'll stick a 1.0 on it.</p>
    <p>Cheers!</p>
    
    <h3>What does jParallax do?</h3>
    <img src="lib-jquery-plugin-parallax-parallax-files-diagram-parallax.png" alt="Diagram of parallax layers." class="diagram">
    <p>jParallax
  turns a selected element into a 'window', or viewport, and all its
  children into absolutely positioned layers that can be seen through the
  viewport. These layers move in response to the mouse, and, depending on
  their dimensions (and options for layer initialisation), they move by
  different amounts, in a parallaxy kind of way.</p>
    <p>The diagram on the right illustrates what Parallax does to the html:</p>
    
  <pre style="padding: 0.5em 1em; text-align: left; color: rgb(0, 0, 0); background-color: rgb(232, 236, 240);"><span style="color: rgb(136, 18, 128);">&lt;ul </span><span style="color: rgb(153, 69, 0);">id</span><span style="color: rgb(136, 18, 128);">=</span><span style="color: rgb(26, 26, 166);">"parallax"</span><span style="color: rgb(136, 18, 128);">&gt;</span>
    <span style="color: rgb(136, 18, 128);">&lt;li&gt;&lt;/li&gt;</span>
    <span style="color: rgb(136, 18, 128);">&lt;li&gt;&lt;/li&gt;</span>
  <span style="color: rgb(136, 18, 128);">&lt;/ul&gt;</span></pre>
    
    <p>Here's a demonstration with some images:</p>
    
    <div id="parallax" class="clear">
            <div style="width: 860px; height: 273px; position: absolute; left: 14.4635%; margin-left: -124.386px; top: 78.1392%; margin-top: -213.32px;">
                    <img src="lib-jquery-plugin-parallax-parallax-files-0-sun.png" alt="" style="position: absolute; left: 300px; top: -12px;">
            </div>
            <div style="width: 920px; height: 274px; position: absolute; left: 14.4635%; margin-left: -133.064px; top: 78.1392%; margin-top: -214.102px;">
                    <img src="lib-jquery-plugin-parallax-parallax-files-1-mountains.png" alt="">
            </div>
            <div style="width: 1100px; height: 284px; position: absolute; left: 14.4635%; margin-left: -159.098px; top: 78.1392%; margin-top: -221.915px;">
                    <img src="lib-jquery-plugin-parallax-parallax-files-2-hill.png" alt="" style="position: absolute; top: 40px; left: 0pt;">
            </div>
            <div style="width: 1360px; height: 320px; position: absolute; left: 14.4635%; margin-left: -196.703px; top: 78.1392%; margin-top: -250.046px;">
                    <img src="lib-jquery-plugin-parallax-parallax-files-3-wood.png" alt="" style="position: absolute; top: 96px; left: 0pt;">
            </div>
    <img src="lib-jquery-plugin-parallax-parallax-files-corner-white-tl.png" class="tl"><img src="lib-jquery-plugin-parallax-parallax-files-corner-white-tr.png" class="tr"><img src="lib-jquery-plugin-parallax-parallax-files-corner-white-bl.png" class="bl"><img src="lib-jquery-plugin-parallax-parallax-files-corner-white-br.png" class="br"></div>
    
    <p>But
  that's not all that jParallax does. If the layers are made of
  &lt;div&gt;s or &lt;li&gt;s or any other container then content can be
  positioned inside those layers, and Parallax provides methods for
  navigating to that content in response to user events.</p>
    
    <h3>Demos</h3>
    <ul>
      <li><a href="http://webdev.stephband.info/parallax_demos.html">webdev.stephband.info/parallax_demos.html</a></li>
      <li><a href="http://webdev.stephband.info/parallax_demos_stalkbuttons.html">webdev.stephband.info/parallax_demos_stalkbuttons.html</a> - demonstrates multiple parallaxed elements per page.</li>
      <li><a href="http://webdev.stephband.info/parallax_demos_stalkremote.html">webdev.stephband.info/parallax_demos_stalkremote.html</a> - shows parallax by 'remote control'.</li>
      <li><a href="http://webdev.stephband.info/parallax_demos_type.html">webdev.stephband.info/parallax_demos_type.html</a> - shows how content inside layers can be linked to.</li>
      <li><a href="http://webdev.stephband.info/parallax_demos_target.html">webdev.stephband.info/parallax_demos_target.html</a> - demonstrates window resizing.</li>
    </ul>
    
    <h3>Using jParallax</h3>
    <p>The
  default behaviour of jParallax is to show the whole width of a layer in
  response to the mouse travelling the whole width of the parallax
  'window'. When the mouse is moved to the extreme left-hand side of the
  parallaxed window the left-hand side of the layer meets it, and when
  the mouse is moved to the extreme right-hand side of the parallaxed
  window the right-hand side of the layer arrives at the right hand-side
  of the window.</p>
    <p>The simplest way to use jParallax is to make
  the layers different sizes using CSS. Bigger layers move faster and
  thus appear closer, and unless a layer is smaller than the viewport,
  its edges are never seen. The <a href="http://webdev.stephband.info/parallax_demos.html">Colour Drops Demo</a>
  was made in exactly this way, with jParallax in its default state, and
  the 'speed' of the layers controlled simply by making the images
  different sizes. No options have been passed in.</p>
    <p>However, we all want tweaky-tweaky.  I also give you tweaky-tweaky...</p>
    
    <h4>Instantiation</h4>
    <pre style="padding: 0.5em 1em; text-align: left; color: rgb(0, 0, 0); background-color: rgb(232, 236, 240);"><span style="color: rgb(0, 51, 105);">jQuery</span>(<span style="color: rgb(118, 15, 21);">'#parallax'</span>).<span style="color: rgb(0, 51, 105);">jparallax</span>(options, layer_options);</pre>
    <p>Clearly
  the parallaxed element(s) can be selected any way you like. For the
  sake of simplicity for the rest of this guide I refer to the parallaxed
  element as '#parallax'.</p>
    
    <h4>CSS</h4>
    <p>In most cases, you should set the following CSS on the parallaxed element:</p>
    <pre style="padding: 0.5em 1em; text-align: left; color: rgb(0, 0, 0); background-color: rgb(232, 236, 240);">#parallax
      {<span style="color: rgb(136, 19, 79);">position</span>:<span style="color: rgb(155, 68, 0);">relative</span>; <span style="color: rgb(136, 19, 79);">overflow</span>:<span style="color: rgb(155, 68, 0);">hidden</span>; <span style="color: rgb(136, 19, 79);">width</span>:<span style="color: rgb(0, 0, 255);"><em>n</em>px</span>; <span style="color: rgb(136, 19, 79);">height</span>:<span style="color: rgb(0, 0, 255);"><em>n</em>px</span>;}</pre>
    <p>Children of a parallaxed element become layers, and are automatically given <code>position:absolute;</code> in order to start moving them around, but the parallaxed element itself needs <code>position:relative;</code> or <code>position:absolute;</code> or the layers will move relative to the document rather than the viewport.  <code>overflow:hidden;</code>
  stops layers displaying outside of the bounds of the viewport, and
  width and height should be set to prevent the viewport collapsing.</p>
    <p>In
  addition, jParallax needs to know how big layers are, and if there is
  anchored content inside a layer it needs to know where and how big it
  is. It uses jQuery's <code>height()</code>, <code>width()</code> and <code>offset()</code>
  methods to find out. However, if you experience trouble with the range
  of motion of a layer you should consider setting all dimensions
  (height, width, top and left) explicitly via CSS to make life easy for
  those methods.</p>
    
    <h4>Options <span class="default">default values</span></h4>
    <p>The
  following options can be passed to jParallax to set the behaviour of
  the mouse, default behaviour of the layers, animation settings and so
  on:</p>
    <dl class="options">
      <dt>mouseResponse: boolean <span class="default">true</span></dt>
      <dt>mouseport: jQuery('element') <span class="default">same as parallaxed element</span></dt>
      <dd>Enables
  mouse response and specifies the DOM element to track the mouse in. By
  default it's on, and it's the same as the viewport, the DOM element
  that you instantiated jParallax on. Perhaps you might want to use the
  whole window as the mouseport, in which case you could pass in <strong>jQuery(window)</strong>.</dd>
      <dt>mouseActiveOutside: boolean <span class="default">false</span></dt>
      <dd>Enables mouse response <em>outside</em> the limits of the mouseport, but layers behave as if the mouse was at the edge of the mouseport.</dd>
      <dt>linkResponse: boolean <span class="default">true</span></dt>
      <dd>Enables
  response to "link" events triggered on the parallaxed element(s).
  Content containing an anchor tag, and positioned inside a layer, is
  pulled to the centre of the viewport when the anchor's <em>name</em> attribute is passed as the first value in an array via the custom "link" event. Consider the following code:
        <pre style="padding: 0.5em 1em; text-align: left; color: rgb(0, 0, 0); background-color: rgb(232, 236, 240);"><span style="color: rgb(0, 51, 105);">jQuery</span>(<span style="color: rgb(118, 15, 21);">'a'</span>).<span style="color: rgb(0, 51, 105);">click</span>(<span style="color: rgb(136, 19, 80);">function</span>(){
        <span style="color: rgb(136, 19, 80);">var</span> ref=<span style="color: rgb(0, 51, 105);">jQuery</span>(<span style="color: rgb(136, 19, 80);">this</span>).<span style="color: rgb(0, 51, 105);">attr</span>(<span style="color: rgb(118, 15, 21);">"href"</span>);
        <span style="color: rgb(0, 51, 105);">jQuery</span>(<span style="color: rgb(118, 15, 21);">'#parallax'</span>).<span style="color: rgb(0, 51, 105);">trigger</span>(<span style="color: rgb(118, 15, 21);">"link"</span>, [ref]);
        });</pre>    
      This says that when an anchor in the document is clicked, its <em>html</em>
  attribute will be passed as a ref to the element '#parallax' in a
  "link" event trigger. If there is content on one of the layers
  containing &lt;a name="ref"&gt; it will be pulled to the centre of the
  viewport. If not, nothing will happen.<br> If linked content is not
  being used it's a good idea to switch linkResponse to false. It will
  save the browser a tiny amount of overhead on plugin initialisation.
  This option was called "triggerResponse" up to version 0.9.9. </dd>
      <dt>linkExposesEdges: boolean <span class="default">false</span></dt>
      <dd>Sets whether linkResponse pulls the edges of layers into the viewport while attempting to display content in the centre.</dd>
      <dt>takeoverFactor: 0-1 <span class="default">0.68</span></dt>
      <dt>takeoverThresh: 0-1 <span class="default">0.002</span></dt>
      <dd>
  Sets the speed and accuracy with which the layers 'catch up' with the
  mouse position when the mouse enters the mouseport from somewhere other
  from whence it has left. Technically, takeoverFactor is the decay of
  the approach curve per animation frame, where lower numbers are more
  decay (and therefore quicker), and takeoverThresh is the distance
  within which the layer position is considered to have arrived, as a
  ratio of the mouseport dimension. takeoverThresh is by default a
  five-hundredth of the mouseport - larger numbers may produce a
  noticeable 'jump' at the beginning of a new mouse movement. You
  shouldn't need to mess with these too much, I just stuck them in there
  because we all like tweaky-tweaky. </dd>
      <dt>frameDuration: milliseconds <span class="default">25</span></dt>
      <dd>
            You may want to put this up to save CPU. About 40 is acceptable (25 frames/second). I like it zippy, though. I hear <a href="http://www.google.com/chrome/">Google Chrome</a> has got timing accuracy down to 1ms!  Others don't do lower than 15ms.
      </dd>
      <dt>xparallax: boolean <span class="default">true</span></dt>
      <dt>yparallax: boolean <span class="default">true</span></dt>
      <dt>xorigin: 'left' | 'centre', 'center', 'middle' | 'right' | 0-1 <span class="default">'centre'</span></dt>
      <dt>yorigin: 'top' | 'centre', 'center', 'middle' | 'bottom' | 0-1 <span class="default">'centre'</span></dt>
      <dd>
            Sets default alignment of layers. See 'Layer Options' below for a detailed description.
      </dd>
      <dt>cssViewport: {name: value} <span class="default">{}</span></dt>
      <dt>cssLayers: {name: value} <span class="default">{position: absolute}</span></dt>
      <dd>Style
  jParallax via jQuery on instantiation. This can make sense when you
  start thinking about graceful degredation. I don't recommend it to
  start with, though.</dd> 
    </dl>
    
    <h4>Layer Options <span class="default">default values</span></h4>
    <p>In addition to the options above, Layer Options can be passed to each layer individually, as extra arguments:</p>
    
    <pre style="padding: 0.5em 1em; text-align: left; color: rgb(0, 0, 0); background-color: rgb(232, 236, 240);"><span style="color: rgb(0, 51, 105);">jQuery</span>(<span style="color: rgb(118, 15, 21);">'element'</span>).<span style="color: rgb(0, 51, 105);">jparallax</span>(options, layer_0_options, layer_1_options, etc.);</pre>
    
    <p>As an example, to give the second layer a set xtravel value, but pass no options as default:</p>
    
    <pre style="padding: 0.5em 1em; text-align: left; color: rgb(0, 0, 0); background-color: rgb(232, 236, 240);"><span style="color: rgb(0, 51, 105);">jQuery</span>(<span style="color: rgb(118, 15, 21);">'element'</span>).<span style="color: rgb(0, 51, 105);">jparallax</span>({}, {}, {xtravel: <span style="color: rgb(118, 15, 21);">'200px'</span>});</pre>
    
    <p>A layer option object can have the following parameters:</p>
    
    <dl class="options">
    <dt>xparallax: boolean <span class="default">true</span></dt>
    <dt>yparallax: boolean <span class="default">true</span></dt>
    <dd>
            Enables motion in the x or y direction in response to the mouse.
    </dd>
    <dt>xtravel:   0-1 | '<em>n</em>%' | '<em>n</em>px' <span class="default">1</span></dt>
    <dt>ytravel:   0-1 | '<em>n</em>%' | '<em>n</em>px' <span class="default">1</span></dt>
    <dd>
  When specified as a number between 0 and 1, or as a percentage string,
  xtravel and ytravel scale the distance a layer will travel. When
  specified as a pixel string they set the distance a layer will travel.<br><br>When
  travel is left at the default 1, the behaviour is to display the whole
  width of the layer over the whole range of the viewport in response to
  the mouse travelling the whole width of the mouseport. In other words,
  the left meets the left when the mouse is on the left, the centre lines
  up when the mouse is at the centre <em>and</em> the right meets the right when the mouse is at the right.  Setting xtravel to, say, <code>0.5</code>, or <code>'50%'</code> will mean half that layer's possible horizontal travel will occur over the same range of mouse motion.<br><br>Numbers outside the range 0-1 can be used, too. Negatives will cause travel in reverse direction, scaling factors greater than <code>1</code> (or <code>'100%'</code>), or less than <code>-1</code> (or <code>'-100%'</code>) will cause the edges of layers to be pulled into view.
    </dd>
    <dt>xorigin:   'left' | 'centre', 'center', 'middle' | 'right' | 0-1 <span class="default">'centre'</span></dt>
    <dt>yorigin:   'top' | 'centre', 'center', 'middle' | 'bottom' | 0-1 <span class="default">'centre'</span></dt>
    <dd>
  Only meaningful when xtravel or ytravel are not 1. Determines which
  point of the layer lines up with which point of the viewport when the
  mouse is at that point in the mouseport. Got that?<br><br>
            Look, if origin.x is set to <strong>'left'</strong>,
  then when the mouse is moved to the left hand side of the mouseport the
  left hand side of the layer arrives at the left hand side of the
  viewport. If it's set to <strong>'centre'</strong>, then when the
  mouse is at the centre of the mouseport the centre of the layer is
  aligned with the centre of the viewport. Similarly with <strong>'right'</strong>.<br><br>
            Numbers may also be used:
            <ul>
                    <li><strong>0</strong> is equivalent to <strong>'left'</strong>.</li>
                    <li><strong>0.5</strong> is equivalent to <strong>'centre'</strong> or <strong>'center'</strong> or <strong>'middle'</strong>.</li>
                    <li><strong>1</strong> is equivalent to <strong>'right'</strong>.</li>
            </ul>
  Numbers outside the range 0-1 may also be used, although you will start
  seeing the edges of layers appearing inside the viewport. And they'll
  travel in the opposite direction.<br><br>
    </dd>
    <dt>width: integer <span class="default">undefined</span></dt>
    <dt>height: integer <span class="default">undefined</span></dt>
    <dd>Values
  for layer dimensions, normally read from css, can be overridden. This
  does NOT change the css, only jParallax's idea of how big a layer is.
  This can be very useful in cases where you want to be able to 'click
  through' the upper layers. Typically you make layers very small in css,
  but tell jParallax they are big via width and height. You prabably want
  overflow: visible on those layers, too.</dd> 
    </dl>
    
    <h3>Tips</h3>
    
    <!--h4>Making layer content clickable</h4>
    <p>Layers can contain anything. They could contain links. Normally, however, the top layer (the last child of #parallax) is going to be the only one that can have clickable items on as the other layers will be behind it. But wait! There is a workaround:</p>
    <ul>
            <li>Set the top layer's CSS dimensions to be really small, say, 1px by 1px.</li>
            <li>Use the <strong>layer[i].width</strong> and <strong>layer[i].height</strong> options to tell Parallax the real dimensions of the layer.</li>
            <li>Absolutely or relatively position your items on the layer.  The layer container element is only 1px big, but (assuming overflow is not hidden) the items will happily sit outside.</li>
            <li>The second layer is now clickable between the gaps in the items on the top layer!</li>
    </ul-->
    
    <h4>Extra graphics</h4>
    <p>If you want to add elements to #parallax, such as overlaying curved corner images like in the above example, add them <em>after</em> you have instantiated jParallax in order to avoid having those elements included in the calculations.</p>
    
    <h4>Transparent image layers</h4>
    <p>Use <a href="http://plugins.jquery.com/project/iFixPng2">jQuery iFixPng plugin</a>, to make see-through .png images work on IE6.</p>
  
    <h3>Sites using jParallax</h3>
    <ul>
      <li><a href="http://www.foldifoldi.com/">www.foldifoldi.com</a></li>
      <li><a href="http://htmlexpress.de/">htmlexpress.de</a></li>
      <li><a href="http://flickaway.s3.amazonaws.com/ploreex/ploreex.html">ploreex flickr visualiser</a></li>
      <li><a href="http://www.vektordesign.com/">vektordesign.com</a></li>
      <li><a href="http://dezignus.com/">dezignus.com</a></li>
      <li><a href="http://themeforest.net/item/communizine/19178">Communizine Wordpress theme</a></li>
      <li><a href="http://stephband.info/">stephband.info</a>, complete parallax overkill</li>
      <li><a href="http://housamz.com/">housamz.com</a></li>
      <!--li><a href="http://www.laura-mitchell.com">www.laura-mitchell.com</a></li-->
    </ul>
    <p>Let me know if you have a site that uses jParallax using the 'Write to me' form at the top of this page.</p>
    
    <h3>Version history</h3>
    
    <h4>0.9.9</h4>
    <p>Basically version 1.0, but until I've fully tested it, it's staying 1% away.</p>
    <ul>
      <li>Code
  majorly refactored. It's much more j now, and a little smaller. The
  anim clock changed, the code got re-shuffled to make it more compact,
  to re-use more routines and make more use of jQuery goodness. The
  biggest internal change is that it now uses vector arrays instead of
  property objects to store data.</li>
      <li>Implemented events for internal control of calculation and animation, and external control of goodies like "freeze" and "link".</li>
      <li>Options added: cssLayers and cssViewport, for 'embedding' styles in the jParallax declaration, should you want to.</li>
      <li>triggerResponse is now linkResponse</li>
      <li>Some previously undocumented options now documented. But not all. Oh no.</li>
    </ul>
  
    <h4>0.9.1</h4>
    <ul>
      <li>Fixed bug when specifying travel by %.</li>
      <li>Travel px or % detection has more robust Regex.</li>
    </ul>
    
    <h4>0.9</h4>
    <ul>
      <li>Code optimisation.</li>
    </ul>
    
    <h4>0.8.1</h4>
    <ul>
      <li>Tested
  in Safari, Firefox 3, IE6, IE7, Google Chrome (Beta) and Opera 9.5. IE6
  has trouble handling multiple jParallax instances when they are
  declared on one jQuery selector. Other than that, all present and
  correct. Declare your doctypes!</li>
      <li>Bug fixed in matrixSearch.</li>
    </ul>
    
    <h4>0.8</h4>
    <ul>
      <li>Gracefully handles window resize.</li>
      <li>Begins to shoot for proper IE support.</li>
      <li>Positioning
  algorithm re-written. In fact, it can barely be called an algorithm any
  longer, as the positioning now relies almost solely on CSS. Whereas
  previously it was defined absolutely in pixels, positioning is now
  defined by <em>percentage</em> combined with variable (negative)
  margins, forcing the browser CSS engine to take more responsibility for
  re-positioning. This means that window resizing is smooth, and the
  Javascript has less calculating to do. However, it may be more of a CPU
  hog this way. Some testing will be done.</li>
      <li>Due to the above
  changes, some Options and Layer Options now mean something slightly
  different to their original definitions. For example, xtravel is now a <em>ratio</em> by default rather than a pixel definition.</li>
      <li>Made
  a minor change to the way dimensions are registered - they now use the
  jQuery methods width(), height() and offset(), so they should no longer
  need to be explicitly set via CSS (although it wouldn't hurt, if you
  want to be sure). This also applies to layer contents.</li>
      <li>Added <a href="http://webdev.stephband.info/parallax_demos_target.html">Target Demo</a> to demonstrate window resizing and Trigger Response, and updated arse demo to jParallax.</li>
      <li>Some code optimising to make it faster, but there's more that can be done in this department.</li>
      <li>Docs updated.</li>
    </ul>
    
    <h4>0.7 (Not released)</h4>
    <ul>
      <li>Unreleased. Broken.</li>
    </ul>
    
    <h4>0.6</h4>
    <ul>
      <li>Trigger response added.</li>
      <li>New demos added. <a href="http://webdev.stephband.info/parallax_demos_stalkremote.html">Remote control</a> and a <a href="http://webdev.stephband.info/parallax_demos_arse.html">crude trigger demo</a>.</li>
      <li>Options
  simplified. They were getting a bit out of hand. Default options are
  now all attributes of one object, rather than nested objects as
  previously. (Layer Options still work the same way, one object per
  layer).</li>
      <li>Docs updated.</li>
    </ul>
    
    <h4>0.5</h4>
    <ul>
      <li>Soft
  Takeover animation timer and mouseport detection rewritten to get rid
  of jerky re-entry bugs. Life is now smoother and creamier.</li>
    </ul>
    
    <h4>0.4</h4>
    <ul>
      <li>Based
  on an idea I read somewhere on the web or possibly in the book jQuery
  In Action, jParallax now saves CPU by moving the layers at a maximum
  frameRate and not on every change of mouse co-ordinates.</li>
      <li>Soft Takeover animates layers to position over time on mouseport re-entry.  It's a little dodgy.</li>
    </ul>
    
    <h4>0.3</h4>
    <ul>
      <li>Implemented
  a crude Soft Takeover. It doesn't animate to position over time, just
  over mouse move, but it does make the mouseport entry a bit smoother.</li>
    </ul>
    
    <h4>0.2</h4>
    <ul>
      <li>Fixed xtravel, ytravel and mouseport initialisation.</li>
      <li>Added Stalk Button demo.</li>
    </ul>
    
    <h4>0.1</h4>
    <ul>
      <li>Initial port from proof of concept code.  My first jQuery plugin!</li>
      <li>Colour drop demo.</li>
    </ul>
  
  </div>
  
  <div id="pullnav">
  
    <a href="#" id="contact"><img src="lib-jquery-plugin-parallax-parallax-files-icon-letter.png" alt=""> Write to me</a>
    <a href="#" id="beer"><img src="lib-jquery-plugin-parallax-parallax-files-icon-beer.png" alt=""> Buy me a beer!</a>
    <div id="housing">
      <form action="https://www.paypal.com/cgi-bin/webscr" method="post" id="donate">
        <input name="cmd" value="_xclick" type="hidden">
        <input name="business" value="stephband@lineone.net" type="hidden">
        <input name="item_name" value="jParallax Donation" type="hidden">
        £ <input name="amount" value="2.80" size="5" maxlength="5" type="text">
        <input name="shipping" value="0.00" type="hidden">
        <input name="no_shipping" value="1" type="hidden">
        <input name="return" value="http://webdev.stephband.info/thanks.html" type="hidden">
        <input name="cancel_return" value="http://webdev.stephband.info/cancelled.html" type="hidden">
        <input name="no_note" value="1" type="hidden">
        <input name="currency_code" value="GBP" type="hidden">
        <input name="tax" value="0.00" type="hidden">
        <input name="lc" value="GB" type="hidden">
        <input name="bn" value="PP-BuyNowBF" type="hidden">
        <input value="Donate with PayPal" name="submit" alt="PayPal - The safer, easier way to pay online." border="0" type="submit">
      </form>
      <form action="php/sendmail.php" method="post" id="message">
        <input name="email" value="your email address" class="email" border="0" type="text">
        <textarea name="message" value="write">your message</textarea>
        <label for="website" class="website">What is nine times eleven? </label><input name="website" value="99" class="website" border="0" type="text">
        <input name="submit" value="Send" border="0" type="submit">
      </form>
    </div>
  
  </div>
  
  </body></html>
  


(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.