FadeScroll.js

Top: &lt;div class="fade-effect" fade-direction="top"&gt;
Bottom: &lt;div class="fade-effect" fade-direction="bottom"&gt;
Left: &lt;div class="fade-effect" fade-direction="left"&gt;
Right: &lt;div class="fade-effect" fade-direction="right"&gt;

FadeScroll.js is a lightweight and easy-to-use script that adds fade effects to HTML elements during page scrolling.

Installation

Download the FadeScroll.js file.
Add the following script at the end of your HTML file's <body> tag:
```
<script src="path/to/FadeScroll.js"></script>
```

To apply the fade effect, add the class fade-effect to the desired HTML element. You can customize the animation using the following attributes:

Specify the duration in seconds:
- 1 second: <div class="fade-effect" fade-time="1">
- 500 milliseconds: <div class="fade-effect" fade-time=".5">

<div class="fade-effect" fade-direction="bottom" fade-time="2">
  <!-- Your content here -->
</div>

This will apply a fade-in effect from the bottom with a duration of 2 seconds.

This project is licensed under the MIT License.
Feel free to use, modify, and distribute it as needed.

This script is also available on jQueryScript.net, where it has been published to make it more accessible to other developers.