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 code 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 code is locked. 

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

3. HTML

This free code 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

More popular tutorials

Discover more articles and tutorials to help you build better.

Look better. Sell Better. With our designs.

Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.

#1 WooCommerce Designs
This site uses cookies to offer you a better browsing experience.