# @emotionagency/parallax

> Simple and lightweight library for creating parallax effect

Latest version **1.0.3** (published 2022-09-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @emotionagency/parallax
pnpm add @emotionagency/parallax
yarn add @emotionagency/parallax
bun add @emotionagency/parallax
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2022-09-03 |
| First published | 2022-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | emotion-agency |
| Maintainers | lkosteckyi |
| Keywords | js, utilities, javascript, parallax, scrolling, animation, scroll, parallaxing |

## Links

- npm: https://www.npmjs.com/package/@emotionagency/parallax
- Repository: https://github.com/letmewin22/emotionagency-parallax
- Homepage: https://github.com/letmewin22/emotionagency-parallax#readme
- Issues: https://github.com/letmewin22/emotionagency-parallax/issues
- npm.io page: https://npm.io/package/@emotionagency/parallax

## Dependencies (1)

- [@emotionagency/utils](https://npm.io/package/@emotionagency/utils.md) *

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.3 (latest) — 2022-09-03
- 1.0.2 — 2022-02-23
- 1.0.1 — 2022-02-22
- 1.0.0 — 2022-02-22

## README

Simple and lightweight library for creating parallax effect

# Instalation

`npm i @emotionagency/parallax`

or

`yarn add @emotionagency/parallax`

# Usage

Basic example
```
import {Parallax} from '@emotionagency/parallax'

const parallax = new Parallax()

<div data-parallax="0.06"></div> // parallax power, [data-parallax] is the selector that makes the script work
<div data-parallax="0.06" data-parallax-scale="1.07"></div> // scale elem if you need
<div data-parallax="0.06" data-parallax-dir="-1"></div> // parallax direction (default is 1)
```

Destroy instance

```
import {Parallax} from '@emotionagency/parallax'

const parallax = new Parallax()

parallax.destroy()
```

Update nodes

```
import {Parallax} from '@emotionagency/parallax'

const parallax = new Parallax()

parallax.update()
```

Reset position

```
import {Parallax} from '@emotionagency/parallax'

const parallax = new Parallax()

parallax.reset()
```


## Instance options

| Option                  | Type      | Default                | Description                                                                                                                                                                                                                                                                                        |
| ----------------------- | --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `inViewDetection`                    | `boolean`  | `true`             | Animation will only happen if the element is in view                                           
| `mobile`                | `boolean`| `true`                |  If true, it will work on mobile devices too.
| `breakpoint`                | `number`| `960`                |  If mobile is selected false, then this value indicates when the parallax will be disabled.

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