Text Rotator/Carousel With Fade & Blur Effects

In this tutorial, we're going to create a cool, modern, and clean text rotator/carousel with fade and blur transition effects to add variety to your websites.

With this text rotator, wen can create a nice & unique effect for showing texts on the website about promotions, special offers, services, etc.

How to use it:

1. Create an empty DIV container to hold the text rotator.

<div id="box"></div>

2. The main CSS styles for the text rotator.

.sl {
  display: block;
  position: absolute;
  top: 50%;
  left: 15%;
  right: 15%;
  text-align: center;
  transform: translateY(-50%);
  line-height: 60px;
  color: #dddedf;
}

span {
  margin: 10px;
  opacity: 0;
  filter: blur(20px);
  text-transform: uppercase;
  font-weight: 900;
}

.sl.active span {
  opacity: 1;
  filter: blur(0px);
  transition: 1s;
}

.active {
  z-index: 10;
}

3. Load the latest jQuery library at the end of the document.

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

4. Define an array of sentences you want to rotate through.

var sentences = new Array ('Sentence 1','Sentence 2','Sentence 3', ... );

5. Activate the text rotator.

// override the default animation speed here
var timer = 5000;

$(document).ready(function(){

  var total = sentences.length - 1;

  for (var i = 0; i <= total; i++) {

      $('#box').append('<p class="sl" id="textBox'+i+'"></p>');
       
      var max = sentences[i].length - 1;

      for (var j = 0; j <= max; j++) {
          $('#textBox'+i).append('<span style="transition: ' + Math.random()*3 + 's; transition-delay: ' + Math.random() + 's;">' + sentences[i].charAt(j) + '</span>'); 
      };

  }; 

  var maxBox = $('#box > p').length;
  var r = 0;

  $('#textBox' + r).addClass('active');

  setInterval(function(){ 

      $('#textBox' + r).removeClass('active');

      r++;

      if (r == maxBox) {
          r = 0;
      }
 
      setTimeout(function(){ 
          $('#textBox' + r).addClass('active');
      }, 2000);

  }, timer);

});

See Also:

• 10 Best Text Rotators In JavaScript And Pure CSS

---

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