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

| | | | | | | --------- | --------- | --------- | --------- | --------- | | 10+ | 16+ | 3+ | 5+ | 12.10+ |

Mobile browsers support

| | | | | | --------- | --------- | --------- | --------- | | 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:

@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:

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

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

<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

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

License

The MIT License (MIT)