https://github.com/koddr/just-scroll
Simple indicate the possibility of scrolling on a page with СSS3 animation.
https://github.com/koddr/just-scroll
animated-elements css3-animations sass scrolling
Last synced: about 2 months ago
JSON representation
Simple indicate the possibility of scrolling on a page with СSS3 animation.
- Host: GitHub
- URL: https://github.com/koddr/just-scroll
- Owner: koddr
- License: mit
- Created: 2017-01-06T17:25:16.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2021-05-06T18:56:14.000Z (about 4 years ago)
- Last Synced: 2025-04-29T19:59:01.666Z (about 2 months ago)
- Topics: animated-elements, css3-animations, sass, scrolling
- Language: Sass
- Homepage:
- Size: 21.5 KB
- Stars: 34
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Just Scroll [](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**
| [
](http://godban.github.io/browsers-support-badges/) | [
](http://godban.github.io/browsers-support-badges/) | [
](http://godban.github.io/browsers-support-badges/) | [
](http://godban.github.io/browsers-support-badges/) | [
](http://godban.github.io/browsers-support-badges/) |
| --------- | --------- | --------- | --------- | --------- |
| 10+ | 16+ | 3+ | 5+ | 12.10+ |
**Mobile browsers support**
| [](http://godban.github.io/browsers-support-badges/) | [
](http://godban.github.io/browsers-support-badges/) | [
](http://godban.github.io/browsers-support-badges/) | [
](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
...
```
* And finally, place animated element into `.just-scroll` container:
```html
```
### 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
```html
```
## Author & maintainers
Development and maintenance engaged by [Vic Shóstak](https://github.com/koddr) (aka Koddr).
If you want to say «thank you» or/and support active development `Just Scroll` — send to project's author some money via PayPal: [@paypal.me/koddr](https://paypal.me/koddr?locale.x=en_EN).
[](https://www.digitalocean.com/?refcode=b41859fa9b6e&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge)
## License
MIT