In this video tutorial I will show you how to create your own simple text ticker (fade in / fade out) with pure CSS & JS, with no plugin needed. Awesome for that Flatsome top bar slider effect and big hero sections.

How to create a text ticker with CSS & jQuery

1. Add JavaScript in your website
2. Add CSS to your theme
3. Import HTML code at desired location

1. JavaScript (JS)

 <script>
(function($){
    $.fn.extend({ 
        rotaterator: function(options) {
 
            var defaults = {
                fadeSpeed: 500,
                pauseSpeed: 3000,
				child:null
            };
             
            var options = $.extend(defaults, options);
         
            return this.each(function() {
                  var o =options;
                  var obj = $(this);                
                  var items = $(obj.children(), obj);
				  items.each(function() {$(this).hide();})
				  if(!o.child){var next = $(obj).children(':first');
				  }else{var next = o.child;
				  }
				  $(next).fadeIn(o.fadeSpeed, function() {
						$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
							var next = $(this).next();
							if (next.length == 0){
									next = $(obj).children(':first');
							}
							$(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
						})
					});
            });
        }
    });
})(jQuery);

 jQuery(document).ready(function() {
        jQuery('.rotate-top-bar').rotaterator({fadeSpeed:500, pauseSpeed:3000});
 });
 </script>

2. CSS

 .rotate-top-bar p{
		display:none;
}

3. HTML

<div class="rotate-top-bar"> 
<p>Ordered before 23:00 is shipped tomorrow </p> 
<p>Free shipping worldwide from $75</p> 
<p>Hassle free returns up to 3 weeks</p> 
</div>