[Flatsome] 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.

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>

Nguồn :