JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<h3 class="flying-text active-text"><img src="http://www.w3schools.com/images/html5_badge_128.gif" alt="" /></h3>

CSS

.flying-text{
z-index: 3;
position: absolute; 
margin-left:-500px;
left: 100px; 
top: 100px;
background-color: none;
font-size: 100px; 
color: #000;
font-family: 'DroidSansBold'; 
letter-spacing: -5px;
}

JavaScript

jQuery.fx.interval = 1000/30; // Set animation to 25 frames per second

$(document).ready(function() {

    $('.flying-text').css({
        opacity: 0
    });
    $('.active-text').animate({
        opacity: 1,
        marginLeft: "0"  // where the text is displayed
    }, 4000);
    
    function changeText() {
        
        var int = setInterval(changeText, 5000);

        var $activeText = $(".active-text");

    }
});