TOP
LEFT
RIGHT
BOTTOM
NONE
A simple Animated Scroll
TOP
LEFT
RIGHT
BOTTOM
NONE
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.
<script src="path/to/FadeScroll.js"></script>
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:
<div class="fade-effect" fade-direction="top">
<div class="fade-effect" fade-direction="bottom">
<div class="fade-effect" fade-direction="left">
<div class="fade-effect" fade-direction="right">
Time is specified in seconds.
<div class="fade-effect" fade-time="1">
<div class="fade-effect" fade-time=".5">
<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.