About this:

Adding this to your website to show fading text will definitely make it look more distinguished. Fade speed and rotation speed can be adjusted accordingly. Even the shown content is interchangeable.

awesome.

invincible.

unbeatable.

indestructible.

Step 1: Adding the Script

This script should be added into the Flatsome Advance setting under Global Settings > Footer Scripts. As you may see, it contains 1 function and 1 DOM manipulator. The function is responsible for recognizing and changing the children of the selected element while the DOM manipulator is responsible for recognizing the element and execute the aforementioned function.

If you wish to adjust the speed of either fading or showing time you will need to adjust the fadeSpeed and/or pauseSpeed to your liking.

<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-content').rotaterator();
 });
</script>

Step 2: Adding the HTML

Adding the HTML can be done anywhere you like with any element you wish to use as long as you recognize that only the child elements  are being displayed in rotation. In this case we used a div with <p> but you may use headings or as text replacement within a title as well. The DOM manipulator in the script selects the class “rotate-content”, so as long as you use it, it will display children.

<div class="rotate-content">
    <p>awesome.</p>
    <p>invincible.</p>
    <p>unbeatable.</p>
    <p>indestructible.</p>
</div>

Step 3: Adding the CSS

The CSS is just a small part and is only used so the text does not show up before the script is loaded. It is added to the Custom CSS part in Flatsome. Since I used <p> in the HTML I hide those. If you used a different element you will have to select the correct element accordingly.

.rotate-content p{
    display: none;
}

Stay Connected

Get in touch

Flatsome is the perfect theme for your shop, company websites or client websites. It has all the tools needed to create super fast responsive websites with amazing user experience.