Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

adds support for string options, rewrites some documentation, adds co…

…mpiled version
  • Loading branch information...
commit 3362ad7b81e615b1680df3078e3c48c9aaebc9ee 1 parent fef56dd
stephband authored
View
273 changelog.html
@@ -0,0 +1,273 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" 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="images/favicon.png" />
+
+<style type="text/css" media="screen, projection">
+
+ @import "http://webdev.stephband.info/css/reset.css";
+ @import "http://webdev.stephband.info/css/typography.css";
+ @import "http://webdev.stephband.info/css/style_light.css";
+ @import "css/jparallax.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>
+
+<!--[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/"><h1>webdev.stephband.info</h1></a>
+</div>
+
+<div id="content">
+
+ <h2>jParallax</h2>
+
+ <h3>Version history</h3>
+
+<h4>Changes to jParallax 0.9.x Beta &gt; 1.x</h4>
+<p>jParallax is more flexible, the options have been simplified, and events added for controlling behaviour of layers. Those who are used to the beta versions will find a few things have changed:</p>
+<h4>Changes to the API</h4>
+<ul>
+ <li><strong>Namespace changed to .parallax() </strong>jParallax adds the namespace <code>.parallax()</code> to jQuery. I prefer this to the previous <code>.jparallax()</code> as it fits the plain-language jQuery ethos. If you don't like it, you can change it back with the first variable in the plugin <code>var plugin = 'parallax';</code>.</li>
+ <li><strong>Declared on layers </strong><code>.parallax()</code> is now declared on the <em>layers</em> rather than on a 'viewport' wrapper. You can now be more selective about which elements parallax and which do not, and you can even choose to parallax layers in different viewports at the same time. In short, it's much more flexible. (It also saves some unnecessary mucking about internally.)</li>
+ <li><strong>Freeze and re-position </strong>Freeze layers and send them to specific positions using the custom events <code>'freeze'</code> and <code>'unfreeze'</code>.</li>
+ <li><strong>Document is the default mouseport</strong> Many people ask how to set up parallax so that it reacts to mouse movement over the whole page. This is now the default behaviour. Use the <code>mouseport</code> option to set another element to react to. For the classic parallax-in-a-viewport effect, you will want to set <code>mouseport</code> to the same element you are using as a viewport.</li>
+ <li><strong>Set up viewports using CSS </strong>It is up to you to create a viewport, if that's the effect you are looking for, using CSS. jParallax comes with some CSS that will get you started.</li>
+ <li><strong>Set up mouseports using CSS </strong>You can now define where the limits of a mouseport's reactive area are, using CSS borders and padding. You'll find that to be useful for setting up a row of parallaxing thumbnails [hint, hint].</li>
+ <li><strong>linkResponse option removed </strong>Use the new <code>freeze</code> event, which allows full control over positioning. It is fairly easy to set up <code>linkResponse</code> functionality using <code>freeze</code> events.</li>
+ <li><strong>xtravel and ytravel options removed </strong>Scaling factors for the range a layer travels are now passed in as xparallax and yparallax. These options also still accept true and false.</li>
+</ul>
+<h4>Changes to the code</h4>
+<ul>
+ <li><strong>Requires jquery.event.frame </strong>jParallax relies on <a href="http://webdev.stephband.info/events/frame/">jquery.event.frame</a> for animation timing. The special <code>frame</code> event was developed specifically for use with jParallax and other plugins that require frame-based animation timers. It's included in the download. You can read about it at <a href="http://webdev.stephband.info/events/frame/">webdev.stephband.info/events/frame/</a>.</li>
+ <li><strong>Moveable mouseport </strong> In the Beta, jParallax would 'lose' the mouseport if it was moved after jParallax was declared: its position was cached. This has been fixed. Now it's position is cached each time the mouse enters it. (For that reason, you probably shouldn't try moving the mouseport while you're using it. I can't think of a condition when you might want to do that - a parallax inside a parallax? Anyone?)</li>
+ <li><strong>Padding and border detection on mouseport </strong>Padding an border are detected and used to control the reactive area of mouseport.</li>
+ <li><strong>Mouseport position no longer cached</strong> Caching the position caused problems when the mouseport was moved after instantiation.</li>
+ <li><strong>All unanimated CSS removed</strong></li> Accompanying stylesheet included in download</li>
+ <li><strong>Multiple instances bug fixed in IE6</strong></li>
+ <li><strong>Uses 0-10% less CPU</strong> In my unscientific tests, which involve watching the CPU meter while playing around with the same test running each version of jParallax, version 1.0 uses about 10% less CPU in Safari 4, 5% less in Opera 9.8, about the same in Firefox 3.5.5. I haven't been able to do these kinds of tests on Windows. If anyone has some anecdotal results, send 'em on...</li>
+</ul>
+
+ <h4><del>0.9.9</del></h4>
+ <p>Withdrawn after it was realised that in refactoring it, I'd made something equally befuddled as the previous version, and it still had bugs. Some ideas from it were used to start v1.0.</p>
+ <ul>
+ <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>
+ </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="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="demos_stalkremote.html">Remote control</a> and a <a href="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 to jQuery plugin framework 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="../images/icon_letter.png" alt=""/> Write to me</a>
+ <a href="#" id="beer"><img src="../images/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 type="hidden" name="cmd" value="_xclick" />
+ <input type="hidden" name="business" value="stephband@lineone.net" />
+ <input type="hidden" name="item_name" value="jParallax Donation" />
+ &pound; <input type="text" name="amount" value="2.80" size="5" maxlength="5" />
+ <input type="hidden" name="shipping" value="0.00" />
+ <input type="hidden" name="no_shipping" value="1" />
+ <input type="hidden" name="return" value="http://webdev.stephband.info/thanks.html" />
+ <input type="hidden" name="cancel_return" value="http://webdev.stephband.info/cancelled.html" />
+ <input type="hidden" name="no_note" value="1" />
+ <input type="hidden" name="currency_code" value="GBP" />
+ <input type="hidden" name="tax" value="0.00" />
+ <input type="hidden" name="lc" value="GB" />
+ <input type="hidden" name="bn" value="PP-BuyNowBF" />
+ <input type="submit" value="Donate with PayPal" border="0" name="submit" alt="PayPal - The safer, easier way to pay online." />
+ </form>
+ <form action="php/sendmail.php" method="post" id="message">
+ <input type="text" border="0" name="email" value="your email address" class="email" />
+ <textarea name="message" value="write" >your message</textarea>
+ <label for="website" class="website">What is nine times eleven? </label><input type="text" border="0" name="website" value="99" class="website" />
+ <input type="submit" border="0" name="submit" value="Send" />
+ </form>
+ </div>
+
+
+</div>
+
+<script type="text/javascript" src="js/jquery-nightly.js"></script>
+<script type="text/javascript" src="http://webdev.stephband.info/events/frame/js/jquery.event.frame.js"></script>
+<script type="text/javascript" src="js/jquery.jparallax.js"></script>
+<!--script type="text/javascript" src="../js/email.js"></script-->
+<script type="text/javascript">
+
+var inPullNav = false;
+
+jQuery(document).ready(function(){
+
+ //jQuery('h1').html('<img src="http://webdev.stephband.info/images/logo_stephband_medcoalblue.png" />');
+
+ jQuery('#parallax>.parallax-layer')
+ .parallax({
+ mouseport: jQuery('#parallax')
+ });
+
+/*
+ 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>
+
+
+</body>
+</html>
View
72 demos/target.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+ <meta charset="utf-8" />
+
+ <title>webdev.stephband.info</title>
+
+ <link rel="icon" type="image/png" href="images/favicon.png" />
+
+ <style type="text/css" media="screen, projection">
+
+ @import "http://webdev.stephband.info/css/reset.css";
+ @import "http://webdev.stephband.info/css/typography.css";
+ @import "http://webdev.stephband.info/css/style_dark.css";
+
+ .parallax-port {
+ position: absolute;
+ top:172px; bottom:80px; left:80px; right:80px;
+ background: #eeeeee; overflow: hidden;
+ border-radius: 12px; -webkit-border-radius: 12px; -moz-border-radius: 12px;
+ }
+ .parallax-layer {
+ position: absolute;
+ }
+
+ </style>
+</head>
+
+<body>
+
+ <div id="header">
+ <a href="../index.html"><h1>webdev.stephband.info</h1></a>
+ </div>
+
+ <div id="content">
+ <h2>jParallax Demos <a href="index.html">next</a></h2>
+ </div>
+
+ <div id="target" class="parallax-port">
+ <img class="parallax-layer" src="http://webdev.stephband.info/jparallax/images/parallax_target/target_blue.png" alt="" />
+ <img class="parallax-layer" src="http://webdev.stephband.info/jparallax/images/parallax_target/target_green.png" alt="" />
+ <img class="parallax-layer" src="http://webdev.stephband.info/jparallax/images/parallax_target/target_red.png" alt="" />
+ </div>
+
+ <script type="text/javascript" src="../js/jquery-nightly.js"></script>
+ <script type="text/javascript" src="http://webdev.stephband.info/events/frame/js/jquery.event.frame.js"></script>
+ <script type="text/javascript" src="../js/jquery.jparallax.js"></script>
+ <script type="text/javascript">
+
+ jQuery(document).ready(function(){
+ var target = jQuery("#target");
+
+ target
+ .children('img')
+ .parallax(
+ { mouseport: target },
+ { xparallax: 0.2, yparallax: 0.2 }, // Blue layer options
+ { xparallax: 0.6, yparallax: 0.6 }, // Green layer options
+ {} // Red layer options
+ );
+ });
+
+ </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]-->
+
+</body>
+</html>
View
226 index.html
@@ -70,32 +70,18 @@
<h3>Download</h3>
<ul>
- <li><a href="js/jquery.parallax.js">jquery.parallax.js</a> 11KB | 4KB MINIFIED | 1.5KB GZIPPED</li>
+ <li><a href="js/jquery.parallax.js">jquery.parallax.js</a> 13KB | 5KB MINIFIED | 2KB GZIPPED</li>
<li><a href="http://webdev.stephband.info/jparallax/js/jquery.parallax-1.0.js">jquery.jparallax.js</a> [11k] 1.0</li>
- </ul>
- <p>jParallax </p>
-
- <h3>Changes to jParallax (0.9.x Beta &gt; 1.0)</h3>
- <p>In 1.0, jParallax is more flexible both internally and externally, the options have been simplified, and events added for controlling parallax behaviour on the fly. Those who are used to the beta versions will find a few things have changed:</p>
- <ul>
- <li><strong>Declared on layers </strong><code>.parallax()</code> is now declared on the <em>layers</em> rather than on a 'viewport' element. You can now be more selective about which elements parallax and which do not, and you can even choose to parallax layers in different viewports at the same time. In short, it's much more flexible. (It also saves some unnecessary mucking about finding children inside the viewport wrapper, internally.)</li>
- <li><strong>Freeze and re-position </strong>Freeze layers and send them to specific positions using the custom events <code>'freeze'</code> and <code>'unfreeze'</code>.</li>
- <li><strong>Document is the default mouseport</strong> Many people ask how to set up parallax so that it reacts to mouse movement over the whole page. This is now the default behaviour. Use the <code>mouseport</code> option to set another element to react to. For the classic parallax-in-a-viewport effect, you will want to set <code>mouseport</code> to the same element you are using as a viewport.</li>
- <li><strong>Set up viewports using CSS </strong>It is up to you to create a viewport, if that's the effect you are looking for, using CSS. jParallax comes with some CSS that will get you started.</li>
- <li><strong>Set up mouseports using CSS </strong>You can now define where the limits of a mouseport's reactive area are, using CSS borders and padding. You'll find that to be useful for setting up a row of parallaxing thumbnails [hint, hint].</li>
- </ul>
- <ul>
- <li><strong>Namespace is .parallax() </strong>jParallax adds the namespace <code>.parallax()</code> to jQuery. I prefer this to <code>.jparallax()</code> because it is more plain-language. However, if you don't like it, you can change it to anything you like with the first variable in the plugin <code>var plugin = 'parallax';</code>.</li>
- <li><strong>Requires jquery.event.frame </strong>jParallax relies on <a href="http://webdev.stephband.info/events/frame/">jquery.event.frame</a> for animation timing. The special <code>frame</code> event was developed specifically for use with jParallax and other plugins that require frame-based animation timers. It's included in the download. You can read about it at <a href="http://webdev.stephband.info/events/frame/">webdev.stephband.info/events/frame/</a>.</li>
- <li><strong>Moveable mouseport </strong> In the Beta, jParallax would 'lose' the mouseport if it was moved after jParallax was declared: its position was cached. This has been fixed. Now it's position is cached each time the mouse enters it. (For that reason, you probably shouldn't try moving the mouseport while you're using it. I can't think of a condition when you might want to do that - a parallax inside a parallax? Anyone?)</li>
- <li><strong>linkResponse deprecated </strong><code>linkResponse</code> option has been deprecated in favour of the new <code>freeze</code> event, which allows full control over positioning. It is fairly easy to set up <code>linkResponse</code> functionality using <code>freeze</code> events.</li>
- <li><strong>Uses 10% less CPU</strong> In my (unscientific) tests, which involve watching the CPU meter while playing around with the same test running each version of jParallax, version 1.0 uses about 10% less CPU in Safari 4, 5% less in Opera 9.8, about the same in Firefox 3.5.5. I haven't been able to do these kinds of tests on Windows. If anyone has some anecdotal results, please send 'em on...</li>
</ul>
-
-
+ <p>jParallax's options have changed in version 1.0. If you are already familiar with jParallax, please read the <a href="changelog.html">changelog</a> for an overview.</p>
+
+ <h3>Instantiation</h3>
+ <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;"><span style="color:#003369;">jQuery</span>( <span style="color:#760f15;">'.parallax-layer'</span> ).<span style="color:#003369;">parallax</span>( options );</pre>
+
+
<h3>What does jParallax do?</h3>
<img src="http://webdev.stephband.info/jparallax/images/diagram_parallax.png" alt="Diagram of parallax layers." class="diagram"/>
- <p>jParallax turns elements into absolutely positioned layers that move in response to the mouse. Depending on their dimensions and plugin options, these layers move at different rates, in a parallaxy kind of way.</p>
+ <p>jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.</p>
<p>With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about.</p>
<p>The diagram on the right illustrates what jParallax does to the html:</p>
@@ -129,9 +115,9 @@
<img src="http://webdev.stephband.info/images/corner_white_br.png" class="br" />
</div>
- <p>But that's not all that jParallax does, because parallaxed layers also react to events that allow them to be frozen and re-positioned wherever you like.</p>
+ <p>jParallax also provides options and event bindings that give you control over a layer's behaviour.</p>
- <h3>Demos</h3>
+ <h3>More demos</h3>
<ul>
<li><a href="http://webdev.stephband.info/jparallax/demos">webdev.stephband.info/jparallax/demo.html</a></li>
<li><a href="http://webdev.stephband.info/jparallax/demos_stalkbuttons.html">webdev.stephband.info/parallax_demos_stalkbuttons.html</a> - demonstrates multiple parallaxed elements per page.</li>
@@ -141,54 +127,55 @@
</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="demos">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="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;"><span style="color:#003369;">jQuery</span>( <span style="color:#760f15;">'.parallax-layer'</span> ).<span style="color:#003369;">parallax</span>( options );</pre>
+ <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 mouseport. When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets it, and when the mouse is moved to the extreme right-hand side of the mouseport the right-hand side of the layer arrives at the right hand-side of its viewport.</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="demos/">Colour Drops Demo</a> is 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 are passed in.</p>
+ <p>However, we all want tweaky-tweaky. I give you tweaky-tweaky...</p>
- <h4>Making a viewport</h4>
- <p>To see layers through a 'window', or 'viewport', wrap them in a container with a style similar to:</p>
- <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;">#parallax
+ <h4>The CSS</h4>
+ <p>There are a few ways to effectively style jParallax. The classic is the 'window', or 'viewport', like in the example above. To see layers through a viewport, wrap them in a container with a style similar to:</p>
+ <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;">.parallax-viewport
{ <span style="color:#88134f;">position</span>:<span style="color:#9b4400;">relative</span>; <span style="color:#88134f;">overflow</span>:<span style="color:#9b4400;">hidden</span>; <span style="color:#88134f;">width</span>:<span style="color:#0000ff;"><em>n</em>px</span>; <span style="color:#88134f;">height</span>:<span style="color:#0000ff;"><em>n</em>px</span>; }</pre>
- <p>Layers are automatically given <code>position:absolute;</code> in order to start moving them around, so they need a container that has position. <code>overflow:hidden;</code> stops layers being visible outside of the viewport, and <code>width</code> and <code>height</code> are set to prevent the viewport collapsing (clearly, width and height can be set using any units).</p>
+ <p>The <code>position</code> declaration sets up the viewport as an offset parent for the layers, while <code>overflow:hidden;</code> stops them being visible outside its boundaries. In order for the layers to move over one another, they must be given:</p>
+ <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;">.parallax-layer
+ { <span style="color:#88134f;">position</span>:<span style="color:#9b4400;">absolute</span>; }</pre>
+<p>There is a basic stylesheet included with the download.</p>
+
<h4>Options <span class="default">default values</span></h4>
<p>The following options can be passed to jParallax to set its behaviour:</p>
<dl class="options">
<dt>mouseport: jQuery object or selector string <span class="default">jQuery(document)</span></dt>
- <dd>Specifies the DOM element to track the mouse in.</dd>
-
- <dt>xparallax: boolean <span class="default">true</span></dt>
- <dt>yparallax: boolean <span class="default">true</span></dt>
- <dd>Set to false to disable parallaxing in the x or y direction.</dd>
-
- <dt>mouseActiveOutside: boolean <span class="default">false</span></dt>
- <dd>Enables mouse response <em>outside</em> the limits of the mouseport. Layers behave as if the mouse was at the edge of the mouseport.</dd>
-
- <dt>frameDuration: milliseconds <span class="default">25</span></dt>
- <dd>Length of time between animation frames. With a lot of big layers, you may want to increase the frame duration to save CPU. About 50 is acceptable (20 frames/second), but I like it zippy. Modern browsers such as <a href="http://www.google.com/chrome/">Google Chrome</a> have accurate timing, but many older browsers choke below about 15ms.</dd>
-
- <dt>xtravel: '<em>n</em>px' | '<em>n</em>%' | 0-1 <span class="default">1</span></dt>
- <dt>ytravel: '<em>n</em>px' | '<em>n</em>%' | 0-1 <span class="default">1</span></dt>
- <dd>Limits the range a layer travels, either to an absolute value in pixels, or by a scaling factor expressed as percentage or as a number in the range 0-1. Scaling factors outside this range are also accepted, but be aware that factors below 0 will reverse the direction of travel, and greater than 1 will make layer edges appear inside the viewport.</dd>
-
- <dt>xorigin: 'left' | 'center', 'middle' | 'right' | 0-1 <span class="default">0.5</span></dt>
- <dt>yorigin: 'top' | 'center', 'middle' | 'bottom' | 0-1 <span class="default">0.5</span></dt>
- <dd>Sets default alignment of layers when xtravel or ytravel limit the range a layer travels.</dd>
+ <dd>Specifies the DOM node to track the mouse in.</dd>
+ <dt>xparallax</dt><dd>boolean | 0-1 | '<em>n</em>%' | '<em>n</em>px'</dd><dd class="default">true</dd>
+ <dt>yparallax</dt><dd>boolean | 0-1 | '<em>n</em>%' | '<em>n</em>px'</dd><dd class="default">true</dd>
+ <dd class="notes">Set to true or false to enable or disable movement. Alternatively, to control the range over which a layer travels, either pass in an absolute value in pixels, or a scaling factor in the range 0-1 (scaling factors can also be expressed as percentage strings). Scaling factors outside this range are also accepted, but be aware that factors below 0 (or '0%') will reverse the direction of travel, and greater than 1 (or '100%') will make layer edges appear inside the extremes of the viewport.</dd>
+ <dt>xorigin</dt><dd>0-1 | '<em>n</em>%' | 'left', 'center', 'middle', 'right'</dd><dd class="default">0.5</span></dd>
+ <dt>yorigin</dt><dd>0-1 | '<em>n</em>%' | 'top', 'center', 'middle'. 'bottom'</dd><dd class="default">0.5</span></dd>
+ <dd>Only meaningful when xparallax or yparallax 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 />It's easy really. It's the same behaviour as the css property <code>background-position</code>. If xorigin is set to <strong>0</strong> (or <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>0.5</strong> (or <strong>'center'</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. And similarly with <strong>1</strong> (or <strong>'right'</strong>).<br /><br />
+Numbers outside the range 0-1 may also be used.</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>
+ <dt>decay</dt><dd>0-1</dd><dd class="default">0.66</dd>
+ <dd class="notes">Sets the rate at which the layers 'catch up' with the mouse position. 0 is instantly, 1 is forever.</dd>
+ <dt>frameDuration: milliseconds <span class="default">30</span></dt>
+ <dd>Length of time between animation frames. With a lot of big layers, you may want to increase the frame duration to save CPU. About 50 is acceptable (20 frames/second), but I like it zippy. Modern browsers like <a href="http://www.google.com/chrome/">Google Chrome</a> have really accurate timing, but many older browsers choke below about 15ms.</dd>
+ <dt>freezeClass</dt><dd class="default">'freeze'</dd><dd class="notes">Class set on a layer when it is frozen.</dd>
- <dt>takeoverFactor: 0-1 <span class="default">0.66</span></dt>
- <dd>Sets the rate at which the layers 'catch up' with the mouse position. 0 is instantly, 1 is forever.</dd>
</dl>
<h4>Events</h4>
<dl class="events">
<dt>freeze</dt>
- <dd>Trigger on a layer to stop it moving. Passing in an optional data object with coordinates allows you to freeze it to a specific position:
- <pre>jQuery('.parallax-layer').bind('freeze', { x: 0.5, y: 0.5 }, fn)</pre>
- Coordinates are expressed as ratios in the range 0-1.
+ <dd>Trigger on a layer to stop it moving.
+ <pre>jQuery('.parallax-layer').trigger('freeze');</pre>
+ Passing in an optional data object allows you to freeze it to a specific position: it can be used to tell a layer where to go, and how fast to go there. It can have the following properties:
+ <dl>
+ <dt>x:</dt><dd>0-1</dd>
+ <dt>y:</dt><dd>0-1</dd><dd>Coordinates are ratios of width or height.</dd>
+ <dt>decay:</dt><dd>0-1</dd><dd>Same as takeoverDecay option. Sets the rate at which the layers 'catch up' with the freeze position. 0 is instantly, 1 is forever.</dd>
+ </dl>
</dd>
<dt>unfreeze</dt>
@@ -196,41 +183,15 @@
</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>
+ <p>In addition to the global options above, individual layers can be passed their own set of options as extra arguments:</p>
- <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;"><span style="color:#003369;">jQuery</span>(<span style="color:#760f15;">'element'</span>).<span style="color:#003369;">jparallax</span>(options, layer_0_options, layer_1_options, etc.);</pre>
+ <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;"><span style="color:#003369;">jQuery</span>(<span style="color:#760f15;">'.parallax-layer'</span>).<span style="color:#003369;">parallax</span>(options, layer_0_options, layer_1_options, ... );</pre>
<p>As an example, to give the second layer a set xtravel value, but pass no options as default:</p>
- <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;"><span style="color:#003369;">jQuery</span>(<span style="color:#760f15;">'element'</span>).<span style="color:#003369;">jparallax</span>({}, {}, {xtravel: <span style="color:#760f15;">'200px'</span>});</pre>
+ <pre style="text-align:left;color:#000000; background-color:#e8ecf0; padding:0.5em 1em 0.5em 1em;"><span style="color:#003369;">jQuery</span>(<span style="color:#760f15;">'.parallax-layer'</span>).<span style="color:#003369;">jparallax</span>({}, {}, {xtravel: <span style="color:#760f15;">'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>
+ <p>A layer option object can have the properties xparallax, yparallax, xorigin, yorigin, width and height.</p>
<h3>Tips</h3>
@@ -243,11 +204,9 @@
<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>
+ <p>Lots of transparency in images will slow down a browser's ability to render quickly. Avoid making huge layers of semi-opaque graphics if you don't want lesser browsers to choke.</p>
+ <p>Try <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>
@@ -264,88 +223,7 @@
<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>
- <p>This being my first javascript project of this kind, I've kept these notes as much for myself as anyone. Releasing a plugin really makes you a better developer. I recommend it!</p>
-
- <h4>0.9.9</h4>
- <p>This version was withdrawn after I realised that it I'd made something equally complex as the previous version, and it still had bugs. Some ideas from it were used to start a complete re-write that became version 1.0.</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="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="demos_stalkremote.html">Remote control</a> and a <a href="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 to jQuery plugin framework from proof of concept code. My first jQuery plugin!</li>
- <li>Colour drop demo.</li>
- </ul>
-
+ <p>See the <a href="changelog.html">changelog</a>.</p>
</div>
View
5,709 js/jquery-1.4a2.js
5,709 additions, 0 deletions not shown
View
132 js/jquery.event.frame.js
@@ -1,72 +1,106 @@
// jquery.events.frame.js
-// 1.0
+// 1.1 - lite
// Stephen Band
//
-// Project home
-// webdev.stephband.info/events/frame
+// Project home:
+// webdev.stephband.info/events/frame/
+//
+// Source:
+// http://github.com/stephband/jquery.event.frame
-(function(jQuery){
+(function(jQuery, undefined){
-var undefined,
- timer = {
- frameDur: 40,
- start: function(elem, fd){
- if ( !this.clock ) {
- // Init the clock
- this.handler = jQuery.event.special.frame.handler;
- this.frameCount = 0;
- this.array = [elem];
- this.clockFirst = setTimeout(this.trigger, 0);
- this.clock = setInterval(this.trigger, fd || this.frameDur);
+var timer;
+
+// Timer constructor
+// fn - callback to call on each frame, with context set to the timer object
+// fd - frame duration in milliseconds
+
+function Timer( fn, fd ) {
+ var self = this,
+ clock;
+
+ function update(){
+ self.frameCount++;
+ fn.call(self);
+ }
+
+ this.frameDuration = fd || 25 ;
+ this.frameCount = -1 ;
+ this.start = function(){
+ update();
+ clock = setInterval(update, this.frameDuration);
+ };
+ this.stop = function(){
+ clearInterval( clock );
+ clock = null;
+ };
+}
+
+// callHandler() is the callback given to the timer object,
+// it makes the event object and calls the handler
+// context is the timer object
+
+function callHandler(){
+ var fn = jQuery.event.special.frame.handler,
+ event = jQuery.Event("frame"),
+ array = this.array,
+ l = array.length;
+
+ // Give event object properties
+ event.frameCount = this.frameCount;
+
+ // Call handler on each elem in array
+ while (l--) {
+ fn.call(array[l], event);
+ }
+}
+
+if (!jQuery.event.special.frame) {
+ jQuery.event.special.frame = {
+ // Fires the first time an event is bound per element
+ setup: function(data, namespaces) {
+ if ( timer ) {
+ timer.array.push(this);
}
else {
- // Add element to array
- this.array.push(elem);
+ timer = new Timer( callHandler, data && data.frameDuration );
+ timer.array = [this];
+
+ // Queue timer to start as soon as this thread has finished
+ var t = setTimeout(function(){
+ timer.start();
+ clearTimeout(t);
+ t = null;
+ }, 0);
}
+ return;
},
- stop: function(elem){
- var array = this.array,
+ // Fires last time event is unbound per element
+ teardown: function(namespaces) {
+ var array = timer.array,
l = array.length;
// Remove element from list
while (l--) {
- if (array[l] === elem) {
+ if (array[l] === this) {
array.splice(l, 1);
break;
}
}
- // Stop clock when list is empty
- if ( array.length === 0 ) {
- clearInterval( this.clock );
- this.clockFirst = null;
- this.clock = null;
+
+ // Stop and remove timer when no elems left
+ if (array.length === 0) {
+ timer.stop();
+ timer = undefined;
}
+ return;
},
- trigger: function(){
- var fn = timer.handler,
- event = jQuery.Event("frame"),
- array = timer.array,
- l = array.length;
-
- // Update event and use it to call handler
- event.frameCount = timer.frameCount++;
- while (l--) { fn.call(array[l], event); }
+ handler: function(event){
+ // let jQuery handle the calling of event handlers
+ jQuery.event.handle.apply(this, arguments);
}
};
-
-jQuery.event.special.frame = {
- setup: function(data) {
- timer.start( this, (data && data.frameDuration) );
- //return false;
- },
- teardown: function() {
- timer.stop( this );
- //return false;
- },
- handler: function(event){
- // let jQuery handle the calling of event handlers
- jQuery.event.handle.apply(this, arguments);
- }
-};
+}
})(jQuery);
View
13 js/jquery.jparallax.js
@@ -25,7 +25,7 @@ var options = {
yparallax: true, //
xorigin: 0.5, // 0-1 - Sets default alignment. Only has effect when parallax values are something other than 1 (or true, or '100%')
yorigin: 0.5, //
- takeoverDecay: 0.66, // 0-1 (0 instant, 1 forever) - Sets rate of decay curve for catching up with target mouse position
+ decay: 0.66, // 0-1 (0 instant, 1 forever) - Sets rate of decay curve for catching up with target mouse position
frameDuration: 30, // Int (milliseconds)
freezeClass: 'freeze' // String - Class added to layer when frozen
},
@@ -63,7 +63,7 @@ function Mouse(options, pointer){
var parallax = [ parseBool(options.xparallax), parseBool(options.yparallax) ];
this.ontarget = false;
- this.decay = options.takeoverDecay;
+ this.decay = options.decay;
this.pointer = pointer || [0.5, 0.5];
this.update = function(pointer, threshold){
@@ -230,6 +230,13 @@ function Layer(elem, options){
// Set px flag
px[i] = regex.px.test(p[i]);
+ // Convert origin to numbers
+ if (typeof origin[i] === 'string') {
+ origin[i] = regex.percent.test(origin[i]) ?
+ parseFloat(origin[i])/100 :
+ value[ origin[i] ] || 1 ;
+ }
+
// We're dealing with pixel dimensions
if ( px[i] ) {
// Set parallax
@@ -266,7 +273,7 @@ function Layer(elem, options){
// Reverse-engineer ratio from layer's current position
while (i--) {
if ( px[i] ) {
- // MISSING: reverse calculation for pixel case
+ // TODO: reverse calculation for pixel case
position[i] = 0;
}
else {
View
39 js/jquery.jparallax.min.js
@@ -0,0 +1,39 @@
+if (!jQuery.event.special.frame) {
+
+// jquery.events.frame.js
+// 1.1 - lite
+// Stephen Band
+//
+// Project home:
+// webdev.stephband.info/events/frame/
+//
+// Source:
+// http://github.com/stephband/jquery.event.frame
+
+(function(d,h){function i(a,b){function e(){f.frameCount++;a.call(f)}var f=this,g;this.frameDuration=b||25;this.frameCount=-1;this.start=function(){e();g=setInterval(e,this.frameDuration)};this.stop=function(){clearInterval(g);g=null}}function j(){var a=d.event.special.frame.handler,b=d.Event("frame"),e=this.array,f=e.length;for(b.frameCount=this.frameCount;f--;)a.call(e[f],b)}var c;if(!d.event.special.frame)d.event.special.frame={setup:function(a){if(c)c.array.push(this);else{c=new i(j,a&&a.frameDuration);
+c.array=[this];var b=setTimeout(function(){c.start();clearTimeout(b);b=null},0)}},teardown:function(){for(var a=c.array,b=a.length;b--;)if(a[b]===this){a.splice(b,1);break}if(a.length===0){c.stop();c=h}},handler:function(){d.event.handle.apply(this,arguments)}}})(jQuery);
+
+}
+
+// jquery.jparallax.js
+// 1.0
+// Stephen Band
+//
+// Project and documentation site:
+// webdev.stephband.info/jparallax/
+//
+// Repository:
+// github.com/stephband/jparallax
+//
+// Dependencies:
+// jquery.event.frame
+
+(function(m,t){function y(h){return this.lib[h]}function q(h){return typeof h==="boolean"?h:!!parseFloat(h)}function r(h,d){var j=[q(h.xparallax),q(h.yparallax)];this.ontarget=false;this.decay=h.takeoverDecay;this.pointer=d||[0.5,0.5];this.update=function(e,k){if(this.ontarget)this.pointer=e;else if((!j[0]||u(e[0]-this.pointer[0])<k[0])&&(!j[1]||u(e[1]-this.pointer[1])<k[1])){this.ontarget=true;this.pointer=e}else{k=[];for(var i=2;i--;)if(j[i])k[i]=e[i]+this.decay*(this.pointer[i]-e[i]);this.pointer=
+k}}}function z(h,d){var j=this,e=h instanceof m?h:m(h),k=[q(d.xparallax),q(d.yparallax)],i=0,a;this.pointer=[0,0];this.active=false;this.activeOutside=d&&d.activeOutside||false;this.update=function(g){var c=this.pos,b=this.size,f=[],l=2;if(i>0){if(i===2){i=0;if(a)g=a}for(;l--;)if(k[l]){f[l]=(g[l]-c[l])/b[l];f[l]=f[l]<0?0:f[l]>1?1:f[l]}this.active=true;this.pointer=f}else this.active=false};this.updateSize=function(){var g=e.width(),c=e.height();j.size=[g,c];j.threshold=[1/g,1/c]};this.updatePos=function(){var g=
+e.offset()||{left:0,top:0},c=parseInt(e.css("borderLeftWidth"))+parseInt(e.css("paddingLeft")),b=parseInt(e.css("borderTopWidth"))+parseInt(e.css("paddingTop"));j.pos=[g.left+c,g.top+b]};m(window).bind("resize",j.updateSize).bind("resize",j.updatePos);e.bind("mouseenter",function(){i=1}).bind("mouseleave",function(g){i=2;a=[g.pageX,g.pageY]});this.updateSize();this.updatePos()}function A(h,d){var j=[],e=[],k=[],i=[];this.update=function(a){for(var g=[],c,b,f=2,l={};f--;)if(e[f]){g[f]=e[f]*a[f]+k[f];
+if(j[f]){c=i[f];b=g[f]*-1}else{c=g[f]*100+"%";b=g[f]*this.size[f]*-1}if(f===0){l.left=c;l.marginLeft=b}else{l.top=c;l.marginTop=b}}h.css(l)};this.setParallax=function(a,g,c,b){a=[a||d.xparallax,g||d.yparallax];c=[c||d.xorigin,b||d.yorigin];for(b=2;b--;){j[b]=o.px.test(a[b]);if(typeof c[b]==="string")c[b]=o.percent.test(c[b])?parseFloat(c[b])/100:v[c[b]]||1;if(j[b]){e[b]=parseInt(a[b]);k[b]=c[b]*(this.size[b]-e[b]);i[b]=c[b]*100+"%"}else{e[b]=a[b]===true?1:o.percent.test(a[b])?parseFloat(a[b])/100:
+a[b];k[b]=e[b]?c[b]*(1-e[b]):0}}};this.getPointer=function(){for(var a=h.offsetParent(),g=h.position(),c=[],b=[],f=2;f--;){c[f]=j[f]?0:g[f===0?"left":"top"]/(a[f===0?"outerWidth":"outerHeight"]()-this.size[f]);b[f]=(c[f]-k[f])/e[f]}return b};this.setSize=function(a,g){this.size=[a||h.outerWidth(),g||h.outerHeight()]};this.setSize(d.width,d.height);this.setParallax(d.xparallax,d.yparallax,d.xorigin,d.yorigin)}function s(h){var d=m(this),j=h.data,e=d.data(n),k=j.port,i=j.mouse,a=e.mouse;if(j.timeStamp!==
+h.timeStamp){j.timeStamp=h.timeStamp;k.update(w);if(k.active||!i.ontarget)i.update(k.pointer,k.threshold)}if(a){a.update(e.freeze?e.freeze.pointer:k.pointer,k.threshold);if(a.ontarget){delete e.mouse;e.freeze&&d.unbind(p).addClass(j.freezeClass)}i=a}else i.ontarget&&!k.active&&d.unbind(p);e.layer.update(i.pointer)}var n="parallax",x={mouseport:document,xparallax:true,yparallax:true,xorigin:0.5,yorigin:0.5,takeoverDecay:0.66,frameDuration:30,freezeClass:"freeze"},v={left:0,top:0,middle:0.5,center:0.5,
+right:1,bottom:1},o={px:/^\d+\s?px$/,percent:/^\d+\s?%$/},p="frame."+n,u=Math.abs,w=[0,0];y.lib=v;m.fn[n]=function(h){var d=m.extend({},m.fn[n].options,h),j=arguments,e=this,k=new z(d.mouseport,d),i=new r(d);d.port=k;d.mouse=i;d.mouseport.bind("mouseenter",function(){i.ontarget=false;e.each(function(){var a=m(this);a.data(n).freeze||a.bind(p,d,s)})});return e.bind("freeze",function(a){var g=m(this),c=g.data(n),b=c.mouse||c.freeze||d.mouse,f=o.percent.exec(a.x)?parseFloat(a.x.replace(/%$/,""))/100:
+a.x||b.pointer[0],l=o.percent.exec(a.y)?parseFloat(a.y.replace(/%$/,""))/100:a.y||b.pointer[1];a=a.decay;c.freeze={pointer:[f,l]};c.mouse=new r(d,b.pointer);if(a!==t)c.mouse.decay=a;g.bind(p,d,s)}).bind("unfreeze",function(a){var g=m(this),c=g.data(n);a=a.decay;var b;if(c.freeze){b=c.mouse?c.mouse.pointer:c.freeze.pointer;c.mouse=new r(d);c.mouse.pointer=b;if(a!==t)c.mouse.decay=a;delete c.freeze;g.removeClass(x.freezeClass).bind(p,d,s)}}).each(function(a){var g=m(this);a=j[a+1]?m.extend({},d,j[a+
+1]):d;var c=new A(g,a);g.data(n,{layer:c,mouse:new r(a,c.getPointer())})})};m.fn[n].options=x;m(document).ready(function(){m(document).mousemove(function(h){w=[h.pageX,h.pageY]})})})(jQuery);
View
6 test.html
@@ -79,9 +79,9 @@
<div class="red parallax-layer"></div>
</div>
-<script type="text/javascript" src="js/jquery-1.4a2.js"></script>
+<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.event.frame.js"></script>
-<script type="text/javascript" src="js/jquery.jparallax.js"></script>
+<script type="text/javascript" src="js/jquery.jparallax.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#test1 .parallax-layer").parallax({
@@ -94,7 +94,7 @@
jQuery("#test2 .parallax-layer").parallax({
mouseport: jQuery("#test2"),
xparallax: '200px',
- xorigin: 0,
+ xorigin: '98%',
yparallax: false
});
Please sign in to comment.
Something went wrong with that request. Please try again.