Add Easy Fade & Slide Results To Components With FadeScroll.js

FadeScroll.js is a light-weight JavaScript plugin that provides refined fade and slide results to parts as they scroll into view.

It helps fading in from the highest, backside, left or proper, which permits parts to easily transition onto the web page. This could improve scrolling and reveal content material in a pure manner.

Excellent for that includes headers, call-to-action buttons, testimonials, or any content material you wish to spotlight.

See Additionally:

Find out how to use it:

1. Obtain the plugin and cargo the fadescroll.js script within the doc.

<script src="/path/to/fadescroll.js"></script>

2. Add the CSS class ‘fade-effect’ to the goal component, set the scroll route utilizing the fade-direction attribute, and outline the period of the animation utilizing the fade-time attribute.

<div class="fade-effect" fade-time="3" fade-direction="high">
  <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="proper">
  <p>RIGHT</p>
</div>

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

3. Customise the fade and slide results utilizing CSS3 animations.

.fade-effect {
  visibility: hidden;
}

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

  100% {
    opacity: 1;
    visibility: seen;
    rework: scale(1);
  }
}

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

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

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

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

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

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

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

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

Changelog:

2024-09-17

• Eliminated jQuery dependency

This superior jQuery plugin is developed by renangf4. For extra Superior Usages, please verify the demo web page or go to the official web site.