From c35e703d5e3db226d7b84f119feb9a055b38f715 Mon Sep 17 00:00:00 2001 From: Stephen Band Date: Mon, 20 Aug 2012 16:39:00 +0100 Subject: [PATCH] Adds .unparallax() and internal teardown methods. --- changelog.html | 3 ++ index.html | 32 ++++++++----- js/jquery.parallax.js | 102 +++++++++++++++++++++++++++++++++++------- 3 files changed, 110 insertions(+), 27 deletions(-) diff --git a/changelog.html b/changelog.html index c542468..2d53008 100644 --- a/changelog.html +++ b/changelog.html @@ -61,6 +61,9 @@

Repository

  • git clone git@github.com:stephband/jparallax.git

    • Changelog

    +

    2.0

    +

    A re-write that irons out bugs

    +

    Changes to jParallax 0.9.x > 1.x

    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:

    diff --git a/index.html b/index.html index a817713..f944762 100644 --- a/index.html +++ b/index.html @@ -81,9 +81,10 @@

    Download

  • github.com/stephband/jparallax
    • -

    Instantiation

    +

    Setup and teardown

    jQuery( '.parallax-layer' ).parallax( options );
    - +
    jQuery( '.parallax-layer' ).unparallax();
    +

    What does jquery.parallax do?

    Diagram of parallax layers.

    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.

    @@ -129,18 +130,24 @@

    More demos

  • demos/target.html - demonstrates how smoothly jParallax handles window resizing.
    • -

    Using jParallax

    -

    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.

    -

    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 Colour Drops Demo 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.

    +

    Using jquery.parallax

    +

    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.

    +

    The simplest way to use jParallax is to give layers different sizes in CSS. The Colour Drops Demo 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.

    +

    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 width and height. By making layers very small in CSS, but overriding those dimensions with the width and height options, it is possible to position links inside those layers and avoid the upper layers from obscuring the lower.

    CSS

    -

    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:

    - 
    .parallax-viewport
-      { position:relative; overflow:hidden; width:npx; height:npx; }
    +

    The classic style is the 'viewport' effect. To see layers through a viewport, wrap them in a container with the style:

    + 
    .parallax-viewport {
+  position:relative;
+  overflow:hidden;
+  width:npx;
+  height:npx;
+}

    The position declaration sets up the viewport as an offset parent for the layers, while overflow:hidden; stops them being visible outside its boundaries. In order for the layers to respond, they must be given:

    - 
    .parallax-layer
-      { position:absolute; }
    -

    There is a basic stylesheet included with the download that provides these classes, and the demos are a good reference for some other effects you can achieve.

    + 
    .parallax-layer {
+  position:absolute;
+}
    +

    The stylesheet included with jquery.parallax provides these classes, and the demos are a good reference for some other effects you can achieve.

    We all like tweaky-tweaky. jQuery.parallax also provides options and event bindings that give you control over a layer's behaviour.

    Options

    @@ -306,7 +313,8 @@

    Find me on...

    - + +