Press "Enter" to skip to content

jQuery Plugin to Add Effect to Your Text | textroll.js

Jquery.textroll.js plugin to add some effect to the text. textroll.js is a small, configurable jQuery text animation plugin for grouping text up and down in sentences like rotating text.

Options:

Speed

  • Type: Integer
  • Default: 600

Delay

  • Type: Integer
  • Default: 1000

isMotionUp

  • Type: Boolean
  • Default: true

Easing

  • Type: String
  • Default: linear

Simple and Smooth Typing Text Animation Javascript Library | tiper-js

How to make use of 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 happen to want extra easing features.

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

3. Define the text you need 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 also you’re performed.

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

5. Config the animation speed & delay.

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

6. Make the text scroll down slightly then up.

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

7. Apply a further easing function to the animation.

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

Configurable Text Rolling Effects, jquery.textroll.js Plugin/Github


See Demo And Download

Official Website(marexandre): Click Here

This superior jQuery/javascript plugin is developed by marexandre. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *