JSFiddle - React, Tailwind, and code Playground

by Reigel Gallarde

HTML

<div id="featured" style="">
    <img src="http://www.iconatlas.com/content/image/4c4fb9058ead0ebe5ff30800/new_message_email_letter.png" width="32" height="32" border="0" >
    <img src="http://www.iconatlas.com/content/image/4c4fb9058ead0ebe5f470900/qualification_history_diploma_graduation.png" width="32" height="32" border="0" >
    <img src="http://www.iconatlas.com/content/image/4c4fb9058ead0ebe5f710900/video_file_movie_film.png" width="32" height="32" border="0" ><img src="http://www.iconatlas.com/content/image/4c4fb9058ead0ebe5f9b0900/add_event_plus_increase.png" width="32" height="32" border="0" ><img src="http://www.iconatlas.com/content/image/4c4fb9058ead0ebe5fbb0800/database_storage.png" width="32" height="32" border="0" > 
</div>

CSS

#featured img {
    position: relative;
}

JavaScript

$(function(){
    var start_time = new Date().getTime();
    var wobble_sec = 4;
    var icons = $("#featured img");
    var bobble = setInterval(function (){
        var sec = ((new Date().getTime()) - start_time)*0.001;
        var alpha = sec*2*Math.PI;
        
        var wobble_alpha = alpha/wobble_sec;
        var lambda = (0.5 + Math.cos(Math.min(Math.PI,wobble_alpha))*0.5)*50;
        
        for (var i=0;i<icons.length;++i)
        {
            var y = Math.round(lambda*(Math.cos(alpha*1.2 + i)*0.5) + 30);
            icons.eq(i).css("top",y+"px");
        }
        
        if (wobble_alpha > Math.PI)
        {
            clearTimeout(bobble);
            
            $("#featured_title").fadeIn(100);
        }
    },30);
});