Text Ticker (Fade) for Top Bar in Flatsome Theme

Show your WooCommerce shop benefits with this simple text ticker fade effect for your top bar in the Flatsome Theme.

Text Ticker with Fade in Top Bar for Flatsome Theme" data-src="Text Ticker with Fade in Top Bar for Flatsome Theme">

Get the best design for your Flatsome shop from $49

95% of the Flatsome shops get more conversion + sales with our designs

See our designs

Get access to Flatsome shortcode. Sign up for free

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)

This free shortcode is locked. 

Sign Up / Login
 <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

This free shortcode is locked. 

Sign Up / Login
.rotate-top-bar p{
		display:none;
}

3. HTML

This free shortcode is locked. 

Sign Up / Login
<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>

With many thanks to Bjorn Patje from FSXperts.com

Other tutorials & documentation

Boost your Flatsome shop further

Get all Seb's Flatsome Designs

Enjoy instant access to our vast library of premium Flatsome templates. Save more than $600 today.

All-Acces Pass $299 $960