This package contains the Scroll Shadow Plugin.
Check the demo.
- Introduction
- How install
- Examples
- Classes
- How to use
- Properties
- Notes
- How Contribuite
- Team
The Scroll Shadow Plugin applies shadows to a scrollable container upper and lower boundaries. This gives the user a visual information that there is hidden content above or below the container visible area. The shadows are only visible when there is hidden content.
Please, read the Node.js official installation guide.
Gulp uses Node for core processing, npm to manage project dependencies, and gulp.js to run tasks and interface with the core library. Node version 8 or higher suffices. You can follow the directions for installing Node on the Node website if you haven't done so already. Installation of Node will include npm. In order to run this project gulp tasks it is highly recommended that you install gulp globally.
From the command line (Windows, Mac or Linux), please execute the following command:
npm install --global gulp-cliClone or download this project. From the project directory run the command npm install.
To run the project in development mode, from the project directory run the command npm run dev. Your default
browser should open a window with the project running from http://localhost:3000/.
<div data-plugin-init="PluginScrollShadow"
style="height: 100px; overflow: auto">
<div class="plugin-scroll-shadow_wrapper">
THIS<br />
IS<br />
A<br/>
TEST<br />
WITH<br />
SCROLLER<br />
SHADOW<br />
</div>
</div><div class="plugin-scroll-header">
<b>HEADER</b>
</div>
<div data-plugin-init="PluginScrollShadow"
data-plugin-shadow-header="plugin-scroll-header"
data-plugin-shadow-footer="plugin-scroll-footer"
style="height: 100px; overflow: auto">
<div class="plugin-scroll-shadow_wrapper">
THIS<br />
IS<br />
A<br/>
TEST<br />
WITH<br />
SCROLLER<br />
SHADOW<br />
</div>
</div>
<div class="plugin-scroll-footer">
<b>FOOTER</b>
</div><div data-plugin-init="PluginScrollShadow"
data-plugin-shadow-height="20"
style="height: 100px; overflow: auto">
<div class="plugin-scroll-shadow_wrapper">
THIS<br />
IS<br />
A<br/>
TEST<br />
WITH<br />
SCROLLER<br />
SHADOW<br />
</div>
</div><div data-plugin-init="PluginScrollShadow"
data-plugin-shadow-initial-color="rgba(255, 198, 157, .5)"
style="height: 100px; overflow: auto">
<div class="plugin-scroll-shadow_wrapper">
THIS<br />
IS<br />
A<br/>
TEST<br />
WITH<br />
SCROLLER<br />
SHADOW<br />
</div>
</div><div data-plugin-init="PluginScrollShadow"
data-plugin-shadow-initial-color="#de3723"
style="height: 100px; overflow: auto">
<div class="plugin-scroll-shadow_wrapper">
THIS<br />
IS<br />
A<br/>
TEST<br />
WITH<br />
SCROLLER<br />
SHADOW<br />
</div>
</div><div data-plugin-init="PluginScrollShadow"
data-plugin-shadow-initial-color="rgba(50, 129, 232, .5)"
data-plugin-shadow-final-color="rgba(50, 129, 232, .1)"
style="height: 100px; overflow: auto">
<div class="plugin-scroll-shadow_wrapper">
THIS<br />
IS<br />
A<br/>
TEST<br />
WITH<br />
SCROLLER<br />
SHADOW<br />
</div>
</div>| Class | Description |
|---|---|
plugin-scroll-shadow |
Scroll Shadow Plugin root element. |
plugin-scroll-shadow__scroller |
Scrollable container content wrapper element. |
plugin-scroll-shadow__scroller__before |
Top scroll shadow element. |
plugin-scroll-shadow__scroller__after |
Bottom scroll shadow element. |
plugin-scroll-shadow__header |
Header scroll shadow element (When defined in an HTML Attribute). |
plugin-scroll-shadow__footer |
Footer scroll shadow element (When defined in an HTML Attribute). |
To apply this plugin, simply set the data-plugin-init="PluginScrollShadow" attribute to any container element.
<div id="container-1" data-plugin-init="PluginScrollShadow">
</div>
Properties can be defined through HTML data attributes.
| Attribute | Description |
|---|---|
data-plugin-init: string |
Scroll Shadow plugin initializer. |
data-plugin-shadow-height: number |
Shadow height property. |
data-plugin-shadow-initial-color: string |
Initial shadow color. It can be expressed in HEX or RGBA. |
data-plugin-shadow-final-color: string |
Final shadow color. It can be expressed in HEX or RGBA. |
data-plugin-shadow-header: string |
External header element class to apply the scroller top shadow. |
data-plugin-shadow-footer: string |
External footer element class to apply the scroller bottom shadow. |
data-plugin-shadow-mobile: boolean |
Property to enable or disable shadow in mobile. (Default: true) |
When is used external header and/or footer, this parent element position will be converted to 'relative'.
- Fork this project: https://github.com/rcdd/PluginScrollShadow
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request
Ruben Domingues
Miguel Teixeira
Miguel Teixeira
This is free and unencumbered software released into the public domain. For more information, please refer to http://unlicense.org.