Add Smooth Fade & Slide Effects To Elements With FadeScroll.js

FadeScroll.js is a lightweight jQuery plugin that adds subtle fade and slide effects to elements as they scroll into view.

It supports fading in from the top, bottom, left or right, which allows elements to smoothly transition onto the page. This can enhance scrolling and reveal content in a natural way.

Perfect for featuring headers, call-to-action buttons, testimonials, or any content you want to highlight.

See Also:

• 10 Best Scroll-triggered Animation Plugins With JavaScript

How to use it:

1. Download the plugin and put the fadescroll.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/fadescroll.js"></script>

2. Add the CSS class 'fade-effect' to the target element, set the scroll direction using the fade-direction attribute, and define the duration of the animation using the fade-time attribute.

<div class="fade-effect" fade-time="3" fade-direction="top">
  <p>TOP</p>
</div>

<div class="fade-effect" fade-time="3" fade-direction="left">
  <p>LEFT</p>
</div>

<div class="fade-effect" fade-time="3" fade-direction="right">
  <p>RIGHT</p>
</div>

<div class="fade-effect" fade-time="3" fade-direction="bottom">
  <p>BOTTOM</p>
</div>

3. Customize the fade and slide effects using CSS3 animations.

.fade-effect {
  visibility: hidden;
}

@keyframes fade {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }
}

@keyframes fade-top-active {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes fade-right-active {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes fade-bottom-active {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes fade-left-active {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

---

This awesome jQuery plugin is developed by renangf4. For more Advanced Usages, please check the demo page or visit the official website.