Skip to content

Commit 18ee74c

Browse files
wagerfieldwagerfield
committed
🇬🇧 Refined jQuery plugin, removed dependencies and wrote README.
1 parent d09ff46 commit 18ee74c

19 files changed

+10862
-3
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
*.DS_Store
2+
build/node_modules

‎LICENSE.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
//============================================================
2+
//
3+
// The MIT License
4+
//
5+
// Copyright (C) 2013 Matthew Wagerfield - @mwagerfield
6+
//
7+
// Permission is hereby granted, free of charge, to any
8+
// person obtaining a copy of this software and associated
9+
// documentation files (the "Software"), to deal in the
10+
// Software without restriction, including without limitation
11+
// the rights to use, copy, modify, merge, publish, distribute,
12+
// sublicense, and/or sell copies of the Software, and to
13+
// permit persons to whom the Software is furnished to do
14+
// so, subject to the following conditions:
15+
//
16+
// The above copyright notice and this permission notice
17+
// shall be included in all copies or substantial portions
18+
// of the Software.
19+
//
20+
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY
21+
// OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT
22+
// LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
23+
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
24+
// EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE
25+
// FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
26+
// AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
27+
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE
28+
// OR OTHER DEALINGS IN THE SOFTWARE.
29+
//
30+
//============================================================

‎README.md

+127-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,128 @@
1-
parallax
2-
========
1+
# Parallax.js
32

4-
Simple, lightweight parallax engine that reacts to the orientation of a smart device
3+
Simple, lightweight **Parallax Engine** that reacts to the **orientation** of a
4+
smart device. Where no gyroscope or motion detection hardware is available, the
5+
position of the cursor is used instead.
6+
7+
Check out this [demo][demo] to see it in action!
8+
9+
## Setup
10+
11+
Simply create a list of elements giving each item that you want to move within
12+
your parallax scene a class of `layer` and a `data-depth` attribute specifying
13+
its depth within the scene. A depth of **0** will cause the layer to remain
14+
stationary, and a depth of **1** will cause the layer to move by the total
15+
effect of the calculated motion. Values inbetween **0** and **1** will cause the
16+
layer to move by a reduced amount relative to its depth.
17+
18+
```html
19+
<ul id="scene">
20+
<li class="layer" data-depth="0.00"><img src="graphics/layer6.png"></li>
21+
<li class="layer" data-depth="0.20"><img src="graphics/layer5.png"></li>
22+
<li class="layer" data-depth="0.40"><img src="graphics/layer4.png"></li>
23+
<li class="layer" data-depth="0.60"><img src="graphics/layer3.png"></li>
24+
<li class="layer" data-depth="0.80"><img src="graphics/layer2.png"></li>
25+
<li class="layer" data-depth="1.00"><img src="graphics/layer1.png"></li>
26+
</ul>
27+
```
28+
29+
To start a **Parallax** scene, simply select you parent DOM Element and pass it
30+
to the **Parallax** constructor.
31+
32+
```javascript
33+
var scene = document.getElementById('scene');
34+
var parallax = new Parallax(scene);
35+
```
36+
37+
## Behaviors
38+
39+
There are a number of behaviors that you can setup for any given **Parallax**
40+
instance. These behaviors can either be specified in the markup via data
41+
attributes or in JavaScript via the constructor or API.
42+
43+
### Behaviors: Data Attributes
44+
45+
```html
46+
<ul id="scene"
47+
data-easing="false"
48+
data-invert-x="false"
49+
data-invert-y="true"
50+
data-limit-x="false"
51+
data-limit-y="10"
52+
data-scalar-x="2"
53+
data-scalar-y="8">
54+
<li class="layer" data-depth="0.00"><img src="graphics/layer6.png"></li>
55+
<li class="layer" data-depth="0.20"><img src="graphics/layer5.png"></li>
56+
<li class="layer" data-depth="0.40"><img src="graphics/layer4.png"></li>
57+
<li class="layer" data-depth="0.60"><img src="graphics/layer3.png"></li>
58+
<li class="layer" data-depth="0.80"><img src="graphics/layer2.png"></li>
59+
<li class="layer" data-depth="1.00"><img src="graphics/layer1.png"></li>
60+
</ul>
61+
```
62+
63+
### Behaviors: Constructor Object
64+
65+
```javascript
66+
var scene = document.getElementById('scene');
67+
var parallax = new Parallax(scene, {
68+
invertX: false,
69+
invertY: true,
70+
limitX: false,
71+
limitY: 10,
72+
scalarX: 2,
73+
scalarY: 8
74+
});
75+
```
76+
77+
### API
78+
79+
```javascript
80+
var scene = document.getElementById('scene');
81+
var parallax = new Parallax(scene);
82+
parallax.enable();
83+
parallax.disable();
84+
parallax.invert(false, true);
85+
parallax.limit(false, 10);
86+
parallax.scalar(2, 8);
87+
```
88+
89+
### jQuery
90+
91+
```javascript
92+
$('.scene').parallax();
93+
```
94+
95+
### jQuery: Passing Options
96+
97+
```javascript
98+
$('.scene').parallax({
99+
invertX: false,
100+
invertY: true,
101+
limitX: false,
102+
limitY: 10,
103+
scalarX: 2,
104+
scalarY: 8
105+
});
106+
```
107+
### jQuery: API
108+
109+
```javascript
110+
var $scene = $('.scene').parallax();
111+
$scene.parallax('enable');
112+
$scene.parallax('disable');
113+
$scene.parallax('invert', false, true);
114+
$scene.parallax('limit', false, 10);
115+
$scene.parallax('scalar', 2, 8);
116+
```
117+
118+
## Author
119+
120+
Matthew Wagerfield: [@mwagerfield][mwagerfield]
121+
122+
## License
123+
124+
Licensed under [MIT][mit]. Enjoy.
125+
126+
[demo]: http://wagerfield.github.com/parallax/
127+
[mwagerfield]: http://twitter.com/mwagerfield
128+
[mit]: http://www.opensource.org/licenses/mit-license.php

‎build/build.js

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
// Dependencies
2+
var fs = require('fs');
3+
var uglify = require('uglify-js');
4+
5+
// Settings
6+
var FILE_ENCODING = 'utf-8',
7+
PROJECT_NAME = 'jquery.parallax',
8+
LICENSE = '../LICENSE.md',
9+
SOURCE_DIR = '../source',
10+
OUTPUT_DIR = '../deploy',
11+
MAIN_SCRIPTS = [
12+
'parallax.js',
13+
'requestAnimationFrame.js'
14+
],
15+
JQUERY_SCRIPTS = [
16+
'jquery.parallax.js',
17+
'requestAnimationFrame.js'
18+
];
19+
20+
// Returns a path string from a list of path segments
21+
function getPath() {
22+
return [].join.call(arguments, '/');
23+
}
24+
25+
// Processes the specified files, creating a concatenated and a concatenated and minified output
26+
function process(scripts) {
27+
var joined, license, unminified, minified;
28+
29+
// Read the license
30+
license = fs.readFileSync(LICENSE, FILE_ENCODING);
31+
32+
// Join the contents of all sources files into a single string
33+
joined = scripts.map(function(file) {
34+
return fs.readFileSync(getPath(SOURCE_DIR, file), FILE_ENCODING);
35+
}).join('\n');
36+
37+
// Unminified
38+
unminified = license + '\n' + joined;
39+
40+
// Minified
41+
minified = license + uglify.minify(joined, {fromString: true}).code;
42+
43+
// Write out the concatenated file
44+
fs.writeFileSync(getPath(OUTPUT_DIR, PROJECT_NAME + '.js'), unminified, FILE_ENCODING);
45+
46+
// Write out the minfied file
47+
fs.writeFileSync(getPath(OUTPUT_DIR, PROJECT_NAME + '.min.js'), minified, FILE_ENCODING);
48+
49+
console.log('build complete');
50+
}
51+
52+
// GO!
53+
// process(MAIN_SCRIPTS);
54+
process(JQUERY_SCRIPTS);

0 commit comments

Comments
 (0)