🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

parallax-js

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

parallax-js - npm Package Compare versions

Comparing version

1.0.0
to
3.0.0

package-lock.json
src/parallax.js
yarn.lock

6

bower.json
{
"name": "parallax-js",
"name": "parallax",
"description": "Parallax Engine that reacts to the orientation of a smart device.",

@@ -11,5 +11,3 @@ "license": "MIT",

"deploy/parallax.js",
"deploy/parallax.min.js",
"deploy/jquery.parallax.js",
"deploy/jquery.parallax.min.js"
"deploy/jquery.parallax.js"
],

@@ -16,0 +14,0 @@ "ignore": [

117

gulpfile.js

@@ -1,43 +0,88 @@

var gulp = require('gulp'),
plugins = require("gulp-load-plugins")();
const gulp = require('gulp')
const path = require('path')
function build(stream, file) {
return stream
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('jshint-stylish'))
.pipe(plugins.concat(file))
.pipe(gulp.dest('deploy'))
.pipe(plugins.rename({suffix: '.min'}))
.pipe(plugins.uglify())
.pipe(gulp.dest('deploy'));
}
const autoprefixer = require('autoprefixer')
const babelify = require('babelify')
const browserify = require('browserify')
const browsersync = require('browser-sync').create()
const buffer = require('vinyl-buffer')
const notifier = require('node-notifier')
const postcss = require('gulp-postcss')
const rename = require('gulp-rename');
const rimraf = require('rimraf')
const sass = require('gulp-sass')
const source = require('vinyl-source-stream')
const sourcemaps = require('gulp-sourcemaps')
const uglify = require('gulp-uglify')
const util = require('gulp-util')
gulp.task('build.parallax', function() {
return build(gulp.src([
'LICENSE',
'source/parallax.js',
'source/requestAnimationFrame.js'
]), 'parallax.js');
});
gulp.task('clean', (cb) => {
rimraf('./dist', cb)
})
gulp.task('build.jquery.parallax', function() {
return build(gulp.src([
'LICENSE',
'source/jquery.parallax.js',
'source/requestAnimationFrame.js'
]), 'jquery.parallax.js');
});
gulp.task('build', ['clean'], () => {
gulp.start('build:js', 'build:scss')
})
gulp.task('clean', function() {
return gulp.src(['deploy'], {read: false}).pipe(plugins.clean());
});
function showError(arg) {
notifier.notify({
title: 'Error',
message: '' + arg,
sound: 'Basso'
})
console.log(arg)
this.emit('end')
}
gulp.task('build', ['clean'], function() {
gulp.start('build.parallax', 'build.jquery.parallax');
});
gulp.task('build:scss', () => {
return gulp.src(path.join('examples', 'assets', 'styles.scss'))
.pipe(sass({
outputStyle: 'nested',
precision: 10,
includePaths: ['.', 'node_modules'],
onError: showError
}).on('error', function(error) {
showError(error)
this.emit('end')
}))
.pipe(postcss([
autoprefixer({
browsers: ['last 2 versions', 'Firefox ESR', 'Explorer >= 9', 'Android >= 4.0', '> 2%']
})
]))
.pipe(gulp.dest(path.join('examples', 'assets')))
.pipe(browsersync.stream({match: '**/*.css'}))
})
gulp.task('watch', function() {
gulp.watch('source/**/*.js', ['build']);
});
gulp.task('build:js', () => {
return browserify({entries: path.join('src', 'parallax.js'), debug: true, standalone: 'Parallax'})
.transform("babelify", {presets: ["es2015"]})
.bundle()
.on('error', showError)
.pipe(source('parallax.js'))
.pipe(buffer())
.pipe(gulp.dest('dist'))
.pipe(rename('parallax.min.js'))
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(uglify())
.on('error', showError)
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('dist'))
.pipe(browsersync.stream({match: path.join('**','*.js')}))
})
gulp.task('watch', ['build'], () => {
browsersync.init({
notify: false,
port: 9000,
server: {
baseDir: [path.join('examples', 'pages'), path.join('examples', 'assets'), 'dist'],
directory: true
}
})
gulp.task('default', ['build']);
gulp.watch(path.join('src', '*.js'), ['build:js'])
gulp.watch(path.join('examples', 'assets', '*.scss'), ['build:scss'])
gulp.watch(path.join('examples', 'pages', '*.html'), browsersync.reload)
})
gulp.task('default', ['watch'])

39

package.json
{
"name": "parallax-js",
"description": "Parallax Engine that reacts to the orientation of a smart device.",
"version": "1.0.0",
"version": "3.0.0",
"license": "MIT",
"main": "dist/parallax.js",
"homepage": "http://wagerfield.github.io/parallax/",
"author": "Matthew Wagerfield <matthew@wagerfield.com>",
"author": "Matthew Wagerfield <matthew@wagerfield.com>, René Roth <mail@reneroth.org>",
"directories": {

@@ -12,3 +13,4 @@ "example": "examples"

"scripts": {
"build": "gulp"
"install": "npm run build",
"build": "rm -rf dist && mkdir dist && browserify src/parallax.js --standalone Parallax -o dist/parallax.js && babel dist/parallax.js --no-babelrc --presets=es2015 --out-file dist/parallax.js && uglifyjs dist/parallax.js -o dist/parallax.min.js --source-map dist/parallax.min.js.map -p relative"
},

@@ -30,12 +32,25 @@ "repository": {

"devDependencies": {
"gulp": "^3.6.1",
"gulp-load-plugins": "^0.5.0",
"gulp-clean": "^0.2.4",
"gulp-concat": "^2.2.0",
"gulp-notify": "^1.2.5",
"gulp-rename": "^1.2.0",
"gulp-jshint": "^1.5.3",
"gulp-uglify": "^0.2.1",
"jshint-stylish": "^0.1.5"
"autoprefixer": "^6.7.2",
"babelify": "^7.3.0",
"browser-sync": "^2.18.7",
"gulp": "^3.9.1",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-sass": "^3.1.0",
"gulp-sourcemaps": "^2.4.0",
"gulp-uglify": "^2.0.1",
"gulp-util": "^3.0.8",
"node-notifier": "^5.0.2",
"rimraf": "^2.5.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"dependencies": {
"babel-cli": "^6.24.1",
"babel-preset-es2015": "^6.24.1",
"browserify": "^14.0.0",
"object-assign": "^4.1.1",
"raf": "^3.3.0",
"uglify-js": "^2.7.5"
}
}

188

README.md

@@ -1,2 +0,2 @@

# Parallax.js
![Parallax.js](logo.png)

@@ -9,22 +9,47 @@ 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.

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.
Add parallax.js to your project with `npm install --save https://github.com/wagerfield/parallax` or `yarn add https://github.com/wagerfield/parallax`.
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. Make sure to run `npm install` in the Parallax folder to compile the project. Or download the precompiled files from the [release section](https://github.com/wagerfield/parallax/releases).
```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>
<script src="dist/parallax.js"></script>
<!-- or if you prefer minified -->
<script src="dist/parallax.min.js"></script>
```
Give each element within your scene 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
<div id="scene">
<div data-depth="0.00"><img src="layer1.png"></div>
<div data-depth="0.20"><img src="layer2.png"></div>
<div data-depth="0.40"><img src="layer3.png"></div>
<div data-depth="0.60"><img src="layer4.png"></div>
<div data-depth="0.80"><img src="layer5.png"></div>
<div 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.
Then set an absolute position for all layer child elements, just like 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

@@ -40,3 +65,3 @@

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

@@ -48,5 +73,5 @@ yMotion = parentElement.height * (scalarY / 100) * layerDepth

```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
```

@@ -58,20 +83,25 @@

| Behaviour | Values | Description |
| ------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `relativeInput` | `true` or `false` | Specifies whether or not to use the coordinate system of the `element` passed to the parallax `constructor`. **Mouse input only.** |
| `clipRelativeInput` | `true` or `false` | Specifies whether or not to clip the mouse input to the bounds of the `element` passed to the parallax `constructor`. **Mouse input only.** |
| `calibrate-x` | `true` or `false` | Specifies whether or not to cache & calculate the motion relative to the initial `x` axis value on initialisation. |
| `calibrate-y` | `true` or `false` | Specifies whether or not to cache & calculate the motion relative to the initial `y` axis value on initialisation. |
| `invert-x` | `true` or `false` | `true` moves layers in opposition to the device motion, `false` slides them away. |
| `invert-y` | `true` or `false` | `true` moves layers in opposition to the device motion, `false` slides them away. |
| `limit-x` | `number` or `false` | A numeric value limits the total range of motion in `x`, `false` allows layers to move with complete freedom. |
| `limit-y` | `number` or `false` | A numeric value limits the total range of motion in `y`, `false` allows layers to move with complete freedom. |
| `scalar-x` | `number` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
| `scalar-y` | `number` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
| `friction-x` | `number` `0 - 1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
| `friction-y` | `number` `0 - 1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
| `origin-x` | `number` | 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` | 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.** |
| Behaviour | Values | Default | Description |
| ------------------- | ------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| `relativeInput` | `true` or `false` | `false` | Specifies whether or not to use the coordinate system of the scene. **Mouse input only.** |
| `clipRelativeInput` | `true` or `false` | `false` | Specifies whether or not to clip the mouse input to the scene bounds. No effect in combination with `hoverOnly`. **Mouse input only.** |
| `hoverOnly` | `true` or `false` | `false` | Apply the parallax effect only while the cursor is over the scene. Best together with `relativeInput` set to true. **Mouse input only.** |
| `inputElement` | `null` or HTML element | `null` | Element used for input calculations. Works only with `relativeInput`, might make sense to set `hoverOnly`. When set via `data-input-element` attribute, takes a query selector. **Mouse input only.** |
| `calibrate-x` | `true` or `false` | `false` | Specifies whether or not to cache & calculate the motion relative to the initial `x` axis value on initialisation. |
| `calibrate-y` | `true` or `false` | `true` | Specifies whether or not to cache & calculate the motion relative to the initial `y` axis value on initialisation. |
| `invert-x` | `true` or `false` | `true` | `true` moves layers in opposition to the device motion, `false` slides them away. |
| `invert-y` | `true` or `false` | `true` | `true` moves layers in opposition to the device motion, `false` slides them away. |
| `limit-x` | `number` or `false` | `false` | A numeric value limits the total range of motion in `x`, `false` allows layers to move with complete freedom. |
| `limit-y` | `number` or `false` | `false` | A numeric value limits the total range of motion in `y`, `false` allows layers to move with complete freedom. |
| `scalar-x` | `number` | `10.0` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
| `scalar-y` | `number` | `10.0` | Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion. |
| `friction-x` | `number` `0 - 1` | `0.1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
| `friction-y` | `number` `0 - 1` | `0.1` | The amount of friction the layers experience. This essentially adds some easing to the layer motion. |
| `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` | `false` | Leaving this at false might increase the performance in some instances, while removing pointer events for the scene - eg, Links are not clickable |
| `onReady` | `null` or `function` | `null` | Function that will be called as soon as Parallax setup is completed. Might take up to 1000ms (`calibrationDelay * 2`) |
In addition to the behaviours described above, there are **two** methods `enable()` and `disable()` that *activate* and *deactivate* the **Parallax** instance respectively.
In addition to the behaviours described above, there are the methods `enable()` and `disable()` that *activate* and *deactivate* the **Parallax** instance respectively.

@@ -81,3 +111,7 @@ ### Behaviours: Data Attributes Example

```html
<ul id="scene"
<div id="scene"
data-relative-input="true"
data-clip-relative-input="false"
data-hover-only="true"
data-input-element="#myinput"
data-calibrate-x="false"

@@ -94,10 +128,12 @@ data-calibrate-y="true"

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>
data-origin-y="1.0"
data-precision="1"
data-pointer-events="false">
<div data-depth="0.00"><img src="graphics/layer1.png"></div>
<div data-depth="0.20"><img src="graphics/layer2.png"></div>
<div data-depth="0.40"><img src="graphics/layer3.png"></div>
<div data-depth="0.60"><img src="graphics/layer4.png"></div>
<div data-depth="0.80"><img src="graphics/layer5.png"></div>
<div data-depth="1.00"><img src="graphics/layer6.png"></div>
</div>
```

@@ -110,2 +146,6 @@

var parallax = new Parallax(scene, {
relativeInput: true,
clipRelativeInput: false,
hoverOnly: true,
inputElement: document.getElementById('myinput'),
calibrateX: false,

@@ -122,3 +162,6 @@ calibrateY: true,

originX: 0.0,
originY: 1.0
originY: 1.0,
precision: 1,
pointerEvents: false,
onReady: function() { alert('ready!'); }
});

@@ -141,46 +184,5 @@ ```

parallax.origin(0.0, 1.0);
parallax.setInputElement(document.getElementById('newinput'));
```
## 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

@@ -217,12 +219,9 @@

During development you can have gulp watch the `source` directory for changes and automatically build the `deploy` files by running:
gulp will watch the `source` directory for changes and automatically build the `dist` files, serving some demo files with live reload.
```
gulp watch
```
## Authors
## Author
Matthew Wagerfield: [@wagerfield][twittermw]
René Roth: [Website][websiterr]
Matthew Wagerfield: [@wagerfield][twitter]
## License

@@ -233,6 +232,5 @@

[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/
deploy/jquery.parallax.js
deploy/jquery.parallax.min.js
deploy/parallax.js
deploy/parallax.min.js
examples/images/layer1.png
examples/images/layer2.png
examples/images/layer3.png
examples/images/layer4.png
examples/images/layer5.png
examples/images/layer6.png
examples/images/layers.psd
examples/interactive.html
examples/jquery.html
examples/relative.html
examples/scripts/jquery.js
examples/scripts/zepto.js
examples/simple.html
examples/styles/styles.css
source/jquery.parallax.js
source/parallax.js
source/requestAnimationFrame.js
.npmignore

Sorry, the diff of this file is not supported yet