# parallaxbro

> A powerful JS parallax framework

Latest version **0.1.4** (published 2017-05-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install parallaxbro
pnpm add parallaxbro
yarn add parallaxbro
bun add parallaxbro
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2017-05-14 |
| First published | 2017-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Jay Pescione |
| Maintainers | iamdevonbutler |

## Links

- npm: https://www.npmjs.com/package/parallaxbro
- Repository: https://github.com/iamdevonbutler/parallaxbro
- Homepage: https://github.com/iamdevonbutler/parallaxbro#readme
- Issues: https://github.com/iamdevonbutler/parallaxbro/issues
- npm.io page: https://npm.io/package/parallaxbro

## Recent versions

- 0.1.4 (latest) — 2017-05-14
- 0.1.3 — 2017-04-09
- 0.1.2 — 2017-04-02
- 0.1.1 — 2017-02-23
- 0.1.0 — 2017-02-23

## README

# ParallaxBro

```javascript
const ParallaxBro = require('parallaxbro');
const laxbro = new ParallaxBro('#wrapper', '2000px');

const c1 = laxbro.addCollection('#collection1');

c1.addElements({
  '#element1': {
    top: 100, // All position values are assumed to be in px.
    hide: {0: false, 500: true}, // Will hide once window.pageYOffset ≈ 500px.
    center: true, // Applies 'margin: 0 auto'
    speed: {
      0: 1, // Speed 1 is normal scrolling rate.
      500: 0, // Speed 0 will stop the element from scrolling.
      1000: -1, // Negative values scroll the element in reverse.
    }
    zIndex: -1, // -1 is default zIndex for all elements.
    update: {
      0: ($el, posY) => $el.fadeOut(), // $el is jQuery wrapped element.
      1000: ($el, posY) => $el.fadeIn(), // Called when window.pageYOffset ≈ 1000.
    },
    xFunc: (posY) => posY, // Changes the element's x position.
  },
  '#element2': { /* ... */ }
});

```

## Installing

**Npm:**

```javascript
npm i --save parallaxbro
```

**Manually:**

Find the library at: [./dist/index.js](https://github.com/iamdevonbutler/parallaxbro/blob/master/dist/index.js) and [./dist/index.min.js](https://github.com/iamdevonbutler/parallaxbro/blob/master/dist/index.min.js)

\* *jQuery is a required dependency*

## Demo

[https://iamdevonbutler.github.io/parallaxbro/](https://iamdevonbutler.github.io/parallaxbro/)

See [App.js](https://github.com/iamdevonbutler/parallaxbro/blob/master/app/app.js) to view the demo's parallaxbro config.


## Collections and elements

Parallax *elements* are grouped into *collections*. A collection is a convenient way to apply behaviors to a group of elements. Properties such as: `top`, and `hide`, are applied to all elements in a collection. Collections are a useful in the development of parallax designs; for instance, they offer a convenient way to either hide or position sections of your content.


## Multi parameter objects
In the example above, the `hide` and `speed` options accept both simple Boolean / Number values or a keyed object. The object keys, we call them breakpoints, change the behavior of your program when the pageYOffset position is == the breakpoint. Object values for options can be passed to both **collections and elements**.

```javascript
c1.addElement('#wrapper', {
  top: {
    0: 0,
    500: 100,
    1000: 1000,
  },
  hide: {
    0: false,
    1500: true,
  }
})
```

## The speed option

Setting the speed option to **1** will have no effect on the element. It will scroll w/ the page per normal.

Setting the speed option to a **negative value** will move the element in the reverse direction.

Setting the speed option to **0** will freeze the element on the page.

## Custom updates

Leverage the `update` option to preform updates of any sort at specific breakpoints:

```javascript
const c1 = require('./collection');

c1.addElements('#element1', {
 /**
  * @param {Object} $el - element wrapped in jQuery
  * @param {Number} posY
  * @this - the parallax element.
  */
  update: {
    0: ($el, posY) => $el.fadeOut()
    200: ($el, posY) => $el.fadeIn()
  }
});
```

## xFunc
The xFunc option for parallax elements allows you to move elements on the x-axis in addition to the y-axis.

```javascript
const c1 = require('./collection');

c1.addElements('#element1', {
   /**
    * @param {Number} posY
    */     
    xFunc: {
      1200: (posY) => -posY
    },
});
```
The callback is passed **posY** (pageYOffset - breakpoint), and the function should return the element's new x position.


## Debug mode
Pass the option `debug=true` to add a **window.pageYOffset** indicator to the page.


## API

### ParallaxBro(selector, height, [options]) *- constructor.*

**@param {String} selector**

Selector string of the wrapper element.

**@param {Number} height**

Static height of the parallax page. It's useful to set it to a large number in development and change it once your design is completed.

**@param {Object} [options]**

* debug {Boolean} - adds a debugger to the page.
* disableStyles {Boolean} - disable ParallaxBro default page styling.
* height {String} - parallax page height.


### .addCollection(selector, [options])

```javascript
const ParallaxBro = require('parallaxbro');
const laxbro = new ParallaxBro('#wrapper');

const c1 = laxbro.addCollection('#collection1', {});

```

**@param {String} selector**
Selector string of the collection wrapper element.

**@param {Object} [options]**

Options include:
* top {Number|Object}
* hide {Boolean|Object}
* zIndex {Number|Object}
* update {Object}


### .addElements(obj)

```javascript
const c1 = require('./collection');

c1.addElements({
  '#elementSelector': { /* options */ },
  '#elementSelector2': { /* options */ },
});

```

**@param {Object} options**

Options include:
* top {Number|Object}
* hide {Boolean|Object}
* speed {Number|Object}
* center {Boolean|Object}
* zIndex {Number|Object}
* update {Object}
* xFunc {Function|Object}


### .addElement(selector, obj)

```javascript
const c1 = require('./collection');

c1.addElement('#elementSelector', {
  /* options */
});
```

**@param {String} selector**

Selector string of the element.


**@param {Object} options**

Options are the same as `.addElements()`

### .unbind()
Unbinds Parallaxbro from requestAnimationFrame recused loop.

---
_Source: https://npm.io/package/parallaxbro · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._