jQuery Smoove - Gorgeous CSS3 Scroll Effects
=============

Smoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page.

## Usage

jQuery Smoove needs to be activated via JavaScript.

```javascript
$('.foo').smoove(options);
```
This will initiate jQuery Smoove on the `.foo` elements with the default settings. Options can however be overridden on individual objects via data-attributes as outlined in the following example.

```html
<div class="foo"></div>
<div class="bar" data-move-x="-200px" data></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.smoove.min.js"></script>
<script>
  // Attach Smoove to elements and set default options
  $(".foo, .bar").smoove({
    offset  : '15%',
    // moveX is overridden to -200px for ".bar" object
    moveX   : '100px',
    moveY   : '100px',
  });
</script>
```

Also note that when defining parameters via data-attributes, CamelCase names are split with hyphens e.g. `moveX` becomes `data-move-x`.


## Options

| Name      | Type | Default | Description |
|-----------|------|---------|-------------|
| `offset`  | integer or string  | 150 | Distance to the bottom of the screen before object glides into view e.g. `10%`. |
| `opacity` | integer (0-100) | 0 | The opacity of the object before it comes into view. |
| `perspective` | integer | 1000 | 3D perspective in pixels. |
| `transformOrigin` | string | `50% 50%` | Origin of the transformin pixel, percentage or keyword (left, right, top or bottom). |
| `skewY`   | angle | none | 2D skew along Y-axis e.g. `90deg`. |
| `move`    | string | none | 2D move along the X- and the Y-axis e.g. `100px,50%`. |
| `move3d`  | string | none | 3D move along the X-, Y- and the Z-axis e.g. `10px,10px,10px`. |
| `moveX`   | string | none | Move the object along its X axis e.g. `10px` or `10%`. |
| `moveY`   | string | none | Move the object along its Y axis e.g. `10px` or `10%`. |
| `moveZ`   | string | none | Move the object along its Z axis e.g. `10px` or `10%`. |
| `rotate`  | string | none | 2D rotation e.g. `90deg`. |
| `rotate3d`| string | none | 3D rotation along X-, Y- and Z-axis e.g. `1,1,1,90deg`. |
| `rotateX` | string | none | 3D rotation along X-axis e.g. `90deg`. |
| `rotateY` | string | none | 3D rotation along Y-axis e.g. `90deg`. |
| `rotateZ` | string | none | 3D rotation along Z-axis e.g. `90deg`. |
| `scale`   | decimal or string  | none | 2D scale on X- and Y-axis (x,y) (e.g. `2.5` or `2,0.5`). |
| `scale3d` | string | none | 3D scale on X-, Y- and Z-axis (x,y,z) (e.g. `2,3,0.5`). |
| `scaleX`  | decimal | none | 2D scale on X-axis. |
| `scaleY`  | decimal | none | 2D scale on Y-axis. |
| `skew`    | angle | none | 2D skew along X- and the Y-axis (e.g. `90deg,90deg`). |
| `skewX`   | angle | none | 2D skew along X-axis e.g. `90deg`. |
| `skewY`   | angle | none | 2D skew along Y-axis e.g. `90deg`. |
 

## Demo

Visit [ABE Media Web Design](http://abemedia.co.uk) to see the plugin in action.


## Copyright

&copy; 2014 Adam Bouqdib - http://abemedia.co.uk