# just-scroll

> Simple indicate the possibility of scrolling on a page with СSS3 animation.

Latest version **1.0.2** (published 2017-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install just-scroll
pnpm add just-scroll
yarn add just-scroll
bun add just-scroll
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2017-01-07 |
| First published | 2017-01-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 33 |
| Author | Vikky Shostak |
| Maintainers | vikkyshostak |
| Keywords | just scroll, mouse wheel, css3 animation |

## Links

- npm: https://www.npmjs.com/package/just-scroll
- Repository: https://github.com/koddr/just-scroll
- Homepage: https://github.com/koddr/just-scroll#readme
- Issues: https://github.com/koddr/just-scroll/issues
- npm.io page: https://npm.io/package/just-scroll

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2017-01-07
- 1.0.1 — 2017-01-07
- 1.0.0 — 2017-01-07

## README

# Just Scroll [![npm version](https://badge.fury.io/js/just-scroll.svg)](https://badge.fury.io/js/just-scroll)

Simple indicate the possibility of scrolling on a page with СSS3 animation.

## Features

* Work on all modern and many older browsers
* Have _SASS_ version for re-build (developers only)
* Include colors, helpers and more stuff
* Support for your issues

**Desktop browsers support**

| [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png" alt="Opera" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) |
| --------- | --------- | --------- | --------- | --------- |
| 10+ | 16+ | 3+ | 5+ | 12.10+ |

**Mobile browsers support**

| [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox Mobile" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome-android.png" alt="Chrome for Android" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari-ios.png" alt="iOS Safari" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera-mini.png" alt="Opera Mini" width="36px" height="36px" />](http://godban.github.io/browsers-support-badges/) |
| --------- | --------- | --------- | --------- |
| 16+ | 2+ | 4+ | 12.10+ |

## How to use?

* First, install from `npm` to your project:

```
$ npm install just-scroll --save
```

* Next, import `just-scroll` to your builded _SASS_ (or _SCSS_) file:

```sass
@import('just-scroll')
```

* Good. Now, add special container with `.just-scroll`, `.to-down` (or `.to-up` if you want to indicate _scroll up_ action) and `.color-*` classes:

```html
<div class="just-scroll to-down color-black">
  ...
</div>
```

* And finally, place animated element into `.just-scroll` container:

```html
<div class="just-scroll to-down color-black">
  <div class="mouse-icon">
    <div class="wheel"></div>
  </div>
</div>
```

### More options?

Just add this class to `.just-scroll` container:

#### .to-*

| CSS Class | Description |
| --------- | --------- |
| `.to-up` | Animation scroll up |
| `.to-down` | Animation scroll down |

#### .color-*

| CSS Class | Description | Value |
| --------- | --------- | --------- |
| `.color-black` | Black color | `rgba(0, 0, 0, 1)` |
| `.color-white` | White color | `rgba(255, 255, 255, 1)` |
| `.color-green` | Green color | `rgba(35, 209, 96, 1)` |

#### .centered

| CSS Class | Description | Value |
| --------- | --------- | --------- |
| `.centered` | Place `.just-scroll` container to center of parent html element | `margin: 0 auto` |

## Animated elements

#### .mouse-icon

<img src="https://koddr.me/images/projects/mouse-icon-wheel-logo-github.gif" alt="mouse icon wheel" />

```html
<div class="mouse-icon">
  <div class="wheel"></div>
</div>
```

## License

[The MIT License (MIT)](https://github.com/koddr/mouse-icon-wheel/blob/master/LICENSE)

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