FadeScroll.js

A simple Animated Scroll

TOP

LEFT

RIGHT

BOTTOM

NONE

Operation

Operation

FadeScroll.js is a lightweight and easy-to-use script for adding fade effects to HTML elements during page scrolling. Follow the instructions below to integrate and customize the animation according to your preference.

Installation

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

Usage

To apply the fade effect, add the class <div class="fade-effect"> to the desired HTML element. Use the following attributes to customize the animation:

Direction:

Time:

Time is specified in seconds.

Example:

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

This example will apply a fade effect in the bottom direction with a duration of 2 seconds. Feel free to experiment and adjust the attributes as needed to suit your preferences.

*If the fade-direction and fade-time attributes are not specified, the default values will be bottom and 1 second, respectively.