Skip to content

Commit

Permalink
Adds .unparallax() and internal teardown methods.
Browse files Browse the repository at this point in the history
  • Loading branch information
@stephband
stephband committed Aug 20, 2012
1 parent 1d7921f commit c35e703
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 27 deletions.
3 changes: 3 additions & 0 deletions changelog.html
View file
Expand Up @@ -61,6 +61,9 @@ <h3>Repository</h3>
<li>git clone git@github.com:stephband/jparallax.git</li>
</ul>
<h3>Changelog</h3>
<h4>2.0</h4>
<p>A re-write that irons out bugs</p>


<h4>Changes to jParallax 0.9.x &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>
Expand Down
32 changes: 20 additions & 12 deletions index.html
View file
Expand Up @@ -81,9 +81,10 @@ <h3>Download</h3>
<li><a href="http://github.com/stephband/jparallax">github.com/stephband/jparallax</a></li>
</ul>

<h3>Instantiation</h3>
<h3>Setup and teardown</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>

<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;">unparallax</span>();</pre>

<h3>What does jquery.parallax do?</h3>
<img src="images/diagram.png" alt="Diagram of parallax layers." class="right diagram"/>
<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>
Expand Down Expand Up @@ -129,18 +130,24 @@ <h3>More demos</h3>
<li><a href="demos/target.html">demos/target.html</a> - demonstrates how smoothly jParallax handles 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 mouseport. When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets the left-hand side of its viewport, 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>Therefore, 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/index.html">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. Only the mouseport option is defined, to make it the same as the viewport.</p>
<h3>Using jquery.parallax</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 mouseport. When the mouse is moved to the extreme left-hand side of the mouseport the left-hand side of the layer meets the left-hand side of its viewport, 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. In this way, bigger layers move faster.</p>
<p>The simplest way to use jParallax is to give layers different sizes in CSS. The <a href="demos/index.html">Colour Drops Demo</a> is made like this, with jParallax in its default state and the 'speed' of the layers controlled by the size of the images. Only the mouseport option is defined.</p>
<p>One problem with the default approach is that the uppermost layer is in front of the others, and any links in the layers underneath are not clickable. To solve this, jquery.parallax also accepts the options <code>width</code> and <code>height</code>. By making layers very small in CSS, but overriding those dimensions with the <code>width</code> and <code>height</code> options, it is possible to position links inside those layers and avoid the upper layers from obscuring the lower.</p>

<h3>CSS</h3>
<p>There are various ways to style jParallax effectively. The classic approach is the 'viewport' effect, as 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>The classic style is the 'viewport' effect. To see layers through a viewport, wrap them in a container with the style:</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>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 respond, 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 that provides these classes, and the <a href="demos/index.html">demos</a> are a good reference for some other effects you can achieve.</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>The stylesheet included with jquery.parallax provides these classes, and the <a href="demos/index.html">demos</a> are a good reference for some other effects you can achieve.</p>
<p>We all like tweaky-tweaky. jQuery.parallax also provides options and event bindings that give you control over a layer's behaviour.</p>

<h3>Options</h3>
Expand Down Expand Up @@ -306,7 +313,8 @@ <h3>Find me on...</h3>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script-->
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.parallax.js"></script>
<script>
jQuery(document).ready(function(){
Expand Down
102 changes: 87 additions & 15 deletions js/jquery.parallax.js
View file
Expand Up @@ -139,10 +139,25 @@

function portData(port) {
var data = {
elem: port,
timer: new Timer(),
pointer: [0, 0]
add: function(node) {
layers = layers ? layers.add(node) : jQuery(node) ;
},
remove: function(node) {
// Remove this elem from port.layers
layers = layers.not(node);

console.log(layers.length, node);

// If port.layers is empty, destroy the port
if (layers.length === 0) {
removeBindings();
removeData();
}
}
},
size, offset;
layers, size, offset;

function updatePointer() {
data.pointer = getPointer(mouse, [true, true], offset, size);
Expand All @@ -163,13 +178,29 @@
data.pointer = getPointer([e.pageX, e.pageY], [true, true], offset, size);
}

win
.on('resize.parallax', resize);
function addBindings() {
win
.on('resize.parallax', resize);

port
.on('mouseenter.parallax', mouseenter)
.on('mouseleave.parallax', mouseleave);
}

port
.on('mouseenter.parallax', mouseenter)
.on('mouseleave.parallax', mouseleave);
function removeBindings() {
win
.off('resize', resize);

port
.off('mouseenter', mouseenter)
.off('mouseleave', mouseleave);
}

function removeData() {
port.removeData();
}

addBindings();
resize();

return data;
Expand Down Expand Up @@ -384,7 +415,8 @@
timer = port.timer;

return this.each(function(i) {
var elem = jQuery(this),
var node = this,
elem = jQuery(this),
opts = args[i + 1] ? jQuery.extend({}, options, args[i + 1]) : options,
data = getData(elem, 'parallax'),
decay = opts.decay,
Expand All @@ -398,22 +430,23 @@
pointerFn = pointerOffTarget,
targetFn = targetInside;

function update(newPointer) {
function updateCss(newPointer) {
var css = layerCss(parallax, px, offset, size, position, newPointer);
elem.css(css);
pointer = newPointer;
}

function frame() {
console.log(port.pointer, pointer, port.threshold, decay, parallax, targetFn, update);
pointerFn(port.pointer, pointer, port.threshold, decay, parallax, targetFn, update);
pointerFn(port.pointer, pointer, port.threshold, decay, parallax, targetFn, updateCss);
}

function targetInside() {
// Pointer hits the target pointer inside the port
pointerFn = pointerOnTarget;
}

function targetOutside() {
// Pointer hits the target pointer outside the port
timer.remove(frame);
}

Expand All @@ -425,14 +458,50 @@
}

function mouseleave(e) {
// Make the layer come to rest at it's limit with inertia
pointerFn = pointerOffTarget;
// Stop the timer when the the pointer hits target
targetFn = targetOutside;
}

elem
if (data) {
console.log('SETUP parallax again');
elem.unparallax();
}

port.elem
.on('mouseenter.parallax', mouseenter)
.on('mouseleave.parallax', mouseleave);

port.add(this);

elem.data('parallax', {
destroy: function(removeStyle) {
var css;

port.elem
.off('mouseenter', mouseenter)
.off('mouseleave', mouseleave);

port.remove(node);
elem.removeData('parallax');

if (removeStyle) {
css = {};

if (parallax[0]) {
css.left = '';
css.marginLeft = '';
}

if (parallax[1]) {
css.top = '';
css.marginTop = '';
}
};
}
});

/*function freeze() {
freeze = true;
}
Expand All @@ -446,11 +515,14 @@
});
};

jQuery.fn.unparallax = function() {
jQuery.fn.unparallax = function(removeStyle) {
return this.each(function() {
var data = jQuery(data, 'parallax');
var data = jQuery.data(this, 'parallax');

// This elem is not parallaxed
if (!data) { return; }

if (data) { data.destoy(); }
data.destroy(removeStyle);
});
};

Expand Down

0 comments on commit c35e703

Please sign in to comment.