" data-src="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
- Add JavaScript in your website
- Add CSS to your theme
- 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>
With many thanks to Bjorn Patje from FSXperts.com
Other tutorials & documentation
Boost your Flatsome shop further
Product Bubbles and Menu Labels in Flatsome Theme
Rebuilding Nike Product Page in Flatsome & WooCommerce
Best Flatsome Theme Setup for WooCommerce Shops
Black Friday ⚡ Limited offer 50%-Off
Get all Seb's Flatsome Designs
Enjoy instant access to our vast library of premium Flatsome templates. Save more than $600 today.
$960