# carallax

> A class to create a layered parallax utilising html canvas

Latest version **0.1.3** (published 2024-04-24) · MIT license · 0 weekly downloads

## Install

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

## 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.3 |
| Published | 2024-04-24 |
| First published | 2022-10-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 36 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Emmanuel Davies |
| Maintainers | meteora-digital |
| Keywords | JavaScript, es6, classes, parallax, canvas |

## Links

- npm: https://www.npmjs.com/package/carallax
- Repository: https://github.com/meteora-digital/carallax
- Homepage: https://github.com/meteora-digital/carallax#readme
- Issues: https://github.com/meteora-digital/carallax/issues
- npm.io page: https://npm.io/package/carallax

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2024-04-24
- 0.1.2 — 2022-11-15
- 0.1.1 — 2022-11-01
- 0.1.0 — 2022-11-01
- 0.0.8 — 2022-11-01
- 0.0.7 — 2022-11-01
- 0.0.6 — 2022-11-01
- 0.0.5 — 2022-11-01
- 0.0.4 — 2022-11-01
- 0.0.3 — 2022-11-01
- 0.0.2 — 2022-11-01
- 0.0.1 — 2022-11-01
- 0.0.0 — 2022-10-31

## README

# Carallax

This class will create a canvas element to draw a layered parallax effect.

## Demo

View on [Codepen](https://codepen.io/meteora-digital/pen/PoaZGyr)

## Installation

```bash
npm i carallax
```

## Usage

#### HTML

```html
<section class="banner">
    <svg> ... </svg>
    <svg> ... </svg>
    <svg> ... </svg>
    <svg> ... </svg>
</section>
```

#### JavaScript

```es6
import CarallaxController from 'carallax';

const banner = document.querySelector('.banner');

const Carallax = new CarallaxController({
    depth: 50,
    alignment: 'bottom',
});
```

#### Put the canvas into the document

```es6
banner.appendChild(Carallax.canvas.element);
```

#### We can either load SVGs from the DOM
```es6
Carallax.add(banner.querySelectorAll('svg'));
```

#### Or we can load images from a URL
```es6
Carallax.add('https://example.com/image.png');
```

#### The front most layer is always static and will not move on scroll. The static layer needs to be added manually.

```es6
banner.appendChild(Carallax.static);
```

## Options

| Option | Type | Description | Default |
|--------|------|-------------|---------|
| `depth` | `number` | The depth of the parallax effect. | `50` |
| `alignment` | `string` | The alignment of the parallax effect. Can be `top`, `center` or `bottom`. | `center` |
| `throttle` | `number` | The resize calculations throttle time in milliseconds. | `100` |
| `dpr ` | `number` | The device pixed ratio | `window.devicePixelRatio` |
| `precision` | `number` | The precision of the parallax effect. (I'd suggest keeping this as low as possible, without seeing a stuttering parallax) | `5` |

## Note:

Currently Firefox struggles to call the canvas `drawImage` method repeatedly. This causes the parallax effect to stutter on larger images / displays. To remedy this I have halved the dpr on Firefox. The "static" layer will render full resolution, while the parallax layers will render at half resolution. This is a temporary fix until I can find a better solution or Firefox fixes the issue. If you have any ideas please let me know.

I have personally found Firefox can perform well with a `firefoxDPR` multiplier value around `0.5` - `0.75`. Any higher than this and the parallax effect will stutter at large scale. It's best to test this on your own project to find the best value for your needs as the lower the value the better the performance, but the image resolution will be lower.

This can be done by adjusting the `dpr` value based on the browser.

```es6
const firefoxDPR = 0.5;
const dpr = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) ? firefoxDPR : window.devicePixelRatio || 1;

new CarallaxController({ dpr });
```

## License
[MIT](https://choosealicense.com/licenses/mit/)

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