Configurable Text Rolling Effects In jQuery - textroll.js

File Size: 6.23 KB
Views Total: 1027
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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=""></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>

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

  // options here

5. Config the animation speed & delay.

  speed: 600,
  delay: 1000,

6. Make the text scroll down rather than up.

  isMotionUp: false

7. Apply an additional easing function to the animation.

  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.