Configurable Text Rolling Effects In jQuery - textroll.js

textroll.js is a tiny, configurable text animation jQuery plugin fors crolling text up and down in sentences like a text rotator.

How to use it:

1. Include the jquery.textroll.js script after jQuery.

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

2. Load the jQuery easing plugin if you need more easing functions.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

3. Define the text you want to scroll up and down.

<div class="textroll">
  <span><a href="#">jQuery</a></span>
  <span><a href="#">Angular</a></span>
  <span><a href="#">React</a></span>
  <span><a href="#">VueJS</a></span>
  <span><a href="#">Pythor</a></span>
</div>

4. Call the function on the parent container and you're done.

$(".textroll").textroll({
  // options here
});

5. Config the animation speed & delay.

$(".textroll").textroll({
  speed: 600,
  delay: 1000,
});

6. Make the text scroll down rather than up.

$(".textroll").textroll({
  isMotionUp: false
});

7. Apply an additional easing function to the animation.

$(".textroll").textroll({
  speed: 600,
  easing: 'easeOutBounce',
});

---

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