|
|
@@ -1,30 +1,104 @@
|
|
|
-# jQuery Smoove - Gorgeous CSS3 Scroll Effects
|
|
|
+jQuery Smoove - Gorgeous CSS3 Scroll Effects
|
|
|
+=============
|
|
|
|
|
|
-A simple jQuery plugin for super sexy scrolling effects using CSS3 transitions and transforms.
|
|
|
+Smoove makes it easy to implement awesome CSS3 transition effects, making your content smoothly glide into the page as your scroll down the page.
|
|
|
|
|
|
-## Getting Started
|
|
|
-Download the [production version][min] or the [development version][max].
|
|
|
|
|
|
-[min]: https://raw.github.com/User/jquery-smoove/master/dist/smoove.min.js
|
|
|
-[max]: https://raw.github.com/User/jquery-smoove/master/dist/smoove.js
|
|
|
+## Setup
|
|
|
|
|
|
-In your web page:
|
|
|
+### Load from CDN
|
|
|
+
|
|
|
+The easiest way to get up and running is to load jQuery Smoove from [cdnjs](http://cdnjs.com). Make sure jQuery is loaded first though.
|
|
|
+
|
|
|
+```html
|
|
|
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>
|
|
|
+```
|
|
|
+
|
|
|
+### Install with Bower
|
|
|
+
|
|
|
+Use the following command to install jQuery Smoove using [bower](https://github.com/twitter/bower).
|
|
|
+
|
|
|
+```
|
|
|
+$ bower install jquery-smoove
|
|
|
+```
|
|
|
+
|
|
|
+Or simply add `jquery-smoove` to your project's `bower.json`.
|
|
|
+
|
|
|
+``` json
|
|
|
+ "dependencies": {
|
|
|
+ "jquery-smoove": "latest"
|
|
|
+ }
|
|
|
+```
|
|
|
+
|
|
|
+### Download
|
|
|
+
|
|
|
+You can also just download the latest package.
|
|
|
+
|
|
|
+- [Download latest version](https://github.com/abeMedia/jquery-smoove/archive/master.zip)
|
|
|
+- or `curl -O https://raw.github.com/abeMedia/jquery-smoove/master/jquery.smoove.js`
|
|
|
+
|
|
|
+## 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
|
|
|
-<script src="jquery.js"></script>
|
|
|
-<script src="dist/smoove.min.js"></script>
|
|
|
+<div class="foo"></div>
|
|
|
+<div class="bar" data-move-x="-200px" data></div>
|
|
|
+
|
|
|
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
|
+<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>
|
|
|
<script>
|
|
|
-jQuery(function($) {
|
|
|
- $.awesome(); // "awesome"
|
|
|
-});
|
|
|
+ // 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>
|
|
|
```
|
|
|
|
|
|
-## Documentation
|
|
|
-_(Coming soon)_
|
|
|
+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 transform in 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) and scroll down the page to see the plugin in action.
|
|
|
+
|
|
|
|
|
|
-## Examples
|
|
|
-_(Coming soon)_
|
|
|
+## Copyright
|
|
|
|
|
|
-## Release History
|
|
|
-_(Nothing yet)_
|
|
|
+© 2014 Adam Bouqdib - http://abemedia.co.uk
|
Adam Bouqdib