# scroll-parallax-effect

> This plugin adds a parallax effect by changing the style sheet according to scrolling and by adding classes.

Latest version **0.4.0** (published 2023-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install scroll-parallax-effect
pnpm add scroll-parallax-effect
yarn add scroll-parallax-effect
bun add scroll-parallax-effect
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2023-12-24 |
| First published | 2020-08-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 322.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | kamem |
| Maintainers | kamem |
| Keywords | scroll, scrolling, animation, parallax, effect, events, vue |

## Links

- npm: https://www.npmjs.com/package/scroll-parallax-effect
- Repository: https://github.com/kamem/scroll-parallax-effect
- npm.io page: https://npm.io/package/scroll-parallax-effect

## Dependencies (10)

- [vue](https://npm.io/package/vue.md) ^3.2.31
- [jest](https://npm.io/package/jest.md) ^29.7.0
- [ts-jest](https://npm.io/package/ts-jest.md) ^29.1.1
- [webpack](https://npm.io/package/webpack.md) ^5.89.0
- [@types/jest](https://npm.io/package/@types/jest.md) ^29.5.11
- [webpack-cli](https://npm.io/package/webpack-cli.md) ^5.1.4
- [can-npm-publish](https://npm.io/package/can-npm-publish.md) ^1.3.6
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^9.3.0
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^11.0.0
- [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^29.7.0

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.4.0 (latest) — 2023-12-24
- 0.3.1 — 2022-04-04
- 0.3.0 — 2022-04-04
- 0.2.4 — 2020-10-30
- 0.2.3 — 2020-10-30
- 0.2.2 — 2020-10-23
- 0.2.1 — 2020-10-14
- 0.2.0 — 2020-10-03
- 0.1.1 — 2020-09-29
- 0.1.0 — 2020-09-27
- 0.0.7 — 2020-09-06
- 0.0.6 — 2020-09-06
- 0.0.5 — 2020-08-30
- 0.0.4 — 2020-08-30
- 0.0.3 — 2020-08-28
- … 1 more at https://npm.io/package/scroll-parallax-effect/versions

## README

# scroll-parallax-effect

スクロールによって css の値を変更することができるプラグインです。

This plugin allows you to change css values by scrolling.

## このプラグインには 3 つの機能があります。

- [Timing](docs/#timing-usage) : 指定 位置を通過したときにクラスを追加します
- [Speed](docs/#speed-usage) : スクロール量に応じて css を変化させる
- [Fit](docs/#fit-usage) : 移動距離に応じて css を変化させる

## This plugin has three functions.

- [Timing](docs/#timing-usage) : add a class when passing a specified position
- [Speed](docs/#speed-usage) : css changes according to the amount of scrolling
- [Fit](docs/#fit-usage) : change css according to distance traveled

## Install

### npm

```terminal
npm install scroll-parallax-effect
```

### yarn

```terminal
yarn add scroll-parallax-effect
```

## Document and Examples

[Document and Examples](docs/)

- [typescript](docs/TYPESCRIPT_ES6_VANILLA.md)
- [vue](docs/VUE.md)
- [svg](docs/SVG.md)

## Example

### Typescript
- [y scroll sample](http://kamem.github.io/scroll-parallax-effect/docs/example/typescript/y-typescript.html)
- [x scroll sample](http://kamem.github.io/scroll-parallax-effect/docs/example/typescript/x-typescript.html)

### Vanilla

- [y scroll sample](http://kamem.github.io/scroll-parallax-effect/docs/example/vanilla/y-vanilla.html)
- [x scroll sample](http://kamem.github.io/scroll-parallax-effect/docs/example/vanilla/x-vanilla.html)

### SVG

- [y scroll sample](http://kamem.github.io/scroll-parallax-effect/docs/example/svg/svg.html)

## Development

### serve

```
yarn serve
```

### build

```
npm run build
```

or

```
yarn build
```

### test

```
yarn test
```

## Previous versions
https://github.com/kamem/scrollParallax

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