Skip to content

Commit

Permalink
Merge branch 'v3'
Browse files Browse the repository at this point in the history
  • Loading branch information
René Roth committed May 1, 2017
2 parents 7462fb7 + 6f039a6 commit ff2dd61
Show file tree
Hide file tree
Showing 44 changed files with 5,296 additions and 14,124 deletions.
9 changes: 9 additions & 0 deletions .babelrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"presets": [
["env", {
"targets": {
"browsers": ["last 2 versions", "> 1%"]
}
}]
]
}
4 changes: 3 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
*.DS_Store
node_modules
assets
dist
**/*.css
npm-debug.log
3 changes: 3 additions & 0 deletions .npmignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
dist
examples
logo.png
131 changes: 55 additions & 76 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,56 @@
# Parallax.js
![Parallax.js](logo.png)

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

Check out this **[demo][demo]** to see it in action!

## Setup

Add parallax.js to your project with `npm install --save parallax-js` or `yarn add parallax-js`.
Now, you can require or import the library, depending on your favorite workflow.

```javascript
const Parallax = require('parallax-js')
// or
import Parallax from 'parallax-js'
```

Of course you can also simply copy over the compiled file from the `dist` folder and include it like any other 3rd party script.

```html
<script src="dist/parallax.js"></script>
<!-- or if you prefer minified -->
<script src="dist/parallax.min.js"></script>
```

Create a list of elements giving each item that you want to move within your parallax scene a class of `layer` and a `data-depth` attribute specifying its depth within the scene. A depth of **0** will cause the layer to remain stationary, and a depth of **1** will cause the layer to move by the total effect of the calculated motion. Values inbetween **0** and **1** will cause the layer to move by an amount relative to the supplied ratio.

```html
<ul id="scene">
<li class="layer" data-depth="0.00"><img src="layer1.png"></li>
<li class="layer" data-depth="0.20"><img src="layer2.png"></li>
<li class="layer" data-depth="0.40"><img src="layer3.png"></li>
<li class="layer" data-depth="0.60"><img src="layer4.png"></li>
<li class="layer" data-depth="0.80"><img src="layer5.png"></li>
<li class="layer" data-depth="1.00"><img src="layer6.png"></li>
</ul>
<div id="scene">
<div class="layer" data-depth="0.00"><img src="layer1.png"></div>
<div class="layer" data-depth="0.20"><img src="layer2.png"></div>
<div class="layer" data-depth="0.40"><img src="layer3.png"></div>
<div class="layer" data-depth="0.60"><img src="layer4.png"></div>
<div class="layer" data-depth="0.80"><img src="layer5.png"></div>
<div class="layer" data-depth="1.00"><img src="layer6.png"></div>
</div>
```

To kickoff a **Parallax** scene, select your parent DOM Element and pass it to the **Parallax** constructor.

```javascript
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
var scene = document.getElementById('scene')
// or, if you use jQuery
var scene = $('#scene').get(0)

var parallax = new Parallax(scene)
```

## Interactivity

If you need to interact with the layers, don't forget to set the `pointerEvents` option, and adjust your layer CSS.
This can be done by setting and absolute position for all layer child elements, as it's done in `examples/pages/interactive.html`. Alternatively, set `pointer-events: none` on the layers and `pointer-events: all` on the layer child elements.

## Understanding Layer Motion Calculations

The amount of motion that each layer moves by depends on 3 contributing factors:
Expand All @@ -36,16 +61,16 @@ The amount of motion that each layer moves by depends on 3 contributing factors:

The calculation for this motion is as follows:

```coffeescript
```javascript
xMotion = parentElement.width * (scalarX / 100) * layerDepth
yMotion = parentElement.height * (scalarY / 100) * layerDepth
```

So for a layer with a `data-depth` value of `0.5` within a scene that has both the `scalarX` and `scalarY` values set to `10` ( *the default* ) where the containing scene element is `1000px x 1000px`, the total motion of the layer in both `x` and `y` would be:

```coffeescript
xMotion = 1000 * (10 / 100) * 0.5 = 50 # 50px of positive and negative motion in x
yMotion = 1000 * (10 / 100) * 0.5 = 50 # 50px of positive and negative motion in y
```javascript
xMotion = 1000 * (10 / 100) * 0.5 = 50 // 50px of positive and negative motion in x
yMotion = 1000 * (10 / 100) * 0.5 = 50 // 50px of positive and negative motion in y
```

## Behaviours
Expand All @@ -69,14 +94,14 @@ There are a number of behaviours that you can setup for any given **Parallax** i
| `origin-x` | `number` | `0.5` | The `x` origin of the mouse input. Defaults to 0.5 (the center). `0` moves the origin to the left edge, `1` to the right edge. **Mouse input only.** |
| `origin-y` | `number` | `0.5` | The `y` origin of the mouse input. Defaults to 0.5 (the center). `0` moves the origin to the top edge, `1` to the bottom edge. **Mouse input only.** |
| `precision` | `integer` | `1` | Decimals the element positions should be rounded to. Changing this value should not be necessary anytime soon. |
| `pointerEvents` | `true` or `false` | `true` | Setting this to false might increase the performance in some instances, while removing pointer events for the scene - eg, Links are not clickable |
| `pointerEvents` | `true` or `false` | `false` | Leaving this at false might increase the performance in some instances, while removing pointer events for the scene - eg, Links are not clickable |

In addition to the behaviours described above, there are **two** methods `enable()` and `disable()` that *activate* and *deactivate* the **Parallax** instance respectively.

### Behaviours: Data Attributes Example

```html
<ul id="scene"
<div id="scene"
data-calibrate-x="false"
data-calibrate-y="true"
data-invert-x="false"
Expand All @@ -89,13 +114,13 @@ In addition to the behaviours described above, there are **two** methods `enable
data-friction-y="0.8"
data-origin-x="0.0"
data-origin-y="1.0">
<li class="layer" data-depth="0.00"><img src="graphics/layer1.png"></li>
<li class="layer" data-depth="0.20"><img src="graphics/layer2.png"></li>
<li class="layer" data-depth="0.40"><img src="graphics/layer3.png"></li>
<li class="layer" data-depth="0.60"><img src="graphics/layer4.png"></li>
<li class="layer" data-depth="0.80"><img src="graphics/layer5.png"></li>
<li class="layer" data-depth="1.00"><img src="graphics/layer6.png"></li>
</ul>
<div class="layer" data-depth="0.00"><img src="graphics/layer1.png"></div>
<div class="layer" data-depth="0.20"><img src="graphics/layer2.png"></div>
<div class="layer" data-depth="0.40"><img src="graphics/layer3.png"></div>
<div class="layer" data-depth="0.60"><img src="graphics/layer4.png"></div>
<div class="layer" data-depth="0.80"><img src="graphics/layer5.png"></div>
<div class="layer" data-depth="1.00"><img src="graphics/layer6.png"></div>
</div>
```

### Behaviours: Constructor Object Example
Expand Down Expand Up @@ -134,48 +159,6 @@ parallax.friction(0.2, 0.8);
parallax.origin(0.0, 1.0);
```

## jQuery

If you're using **[jQuery][jquery]** or **[Zepto][zepto]** and would prefer to
use **Parallax.js** as a plugin, you're in luck!

```javascript
$('#scene').parallax();
```

### jQuery: Passing Options

```javascript
$('#scene').parallax({
calibrateX: false,
calibrateY: true,
invertX: false,
invertY: true,
limitX: false,
limitY: 10,
scalarX: 2,
scalarY: 8,
frictionX: 0.2,
frictionY: 0.8,
originX: 0.0,
originY: 1.0
});
```
### jQuery: API

```javascript
var $scene = $('#scene').parallax();
$scene.parallax('enable');
$scene.parallax('disable');
$scene.parallax('updateLayers');
$scene.parallax('calibrate', false, true);
$scene.parallax('invert', false, true);
$scene.parallax('limit', false, 10);
$scene.parallax('scalar', 2, 8);
$scene.parallax('friction', 0.2, 0.8);
$scene.parallax('origin', 0.0, 1.0);
```

## iOS

If you are writing a **native iOS application** and would like to use **parallax.js** within a `UIWebView`, you will need to do a little bit of work to get it running.
Expand Down Expand Up @@ -207,23 +190,19 @@ npm install
gulp
```

During development you can have gulp watch the `source` directory for changes and automatically build the `deploy` files by running:

```
gulp watch
```
gulp will watch the `source` directory for changes and automatically build the `dist` files, serving some demo files with live reload.

## Author
## Authors

Matthew Wagerfield: [@wagerfield][twitter]
Matthew Wagerfield: [@wagerfield][twittermw]
René Roth: [Website][websiterr]

## License

Licensed under [MIT][mit]. Enjoy.

[demo]: http://wagerfield.github.com/parallax/
[twitter]: http://twitter.com/wagerfield
[twittermw]: http://twitter.com/wagerfield
[websiterr]: http://reneroth.org/
[mit]: http://www.opensource.org/licenses/mit-license.php
[jquery]: http://jquery.com/
[zepto]: http://zeptojs.com/
[gulp]: http://gulpjs.com/
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"name": "parallax-js",
"name": "parallax",
"description": "Parallax Engine that reacts to the orientation of a smart device.",
"license": "MIT",
"homepage": "http://wagerfield.github.io/parallax/",
Expand Down
Loading

0 comments on commit ff2dd61

Please sign in to comment.