JSFiddle - React, Tailwind, and code Playground

Animate Your Skills!

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div class="grid grid-pad">
    <div class="col-1">
        <h1>Animated Skill Graphs</h1>      
    </div>
    <div class="col-1-2">
        <h2>Web Development Skills</h2>
        <div id="vGraph-cont">
            <table class="vGraphtable" id="vSkill-rating">
                <tbody>
                <tr>
                
                <td>
                    <!-- Graph -->
                    <div class="vGraph">
                        <div class="line20"><span>100</span></div>
                        <div class="line20"><span>80</span></div>
                        <div class="line20"><span>60</span></div>
                        <div class="line20"><span>40</span></div>
                        <div class="line20"><span>20</span></div>
                        <div class="line20"><span>0</span></div>
                    </div>

                    <!-- Animated Skills -->
                    <div class="vSkills">
                        <ul>
                            <li><a id="skill-jquery" href="#" class="jquery tool-tip" title="80"></a></li>
                            <li><a id="skill-css3" href="#" class="css3 tool-tip" title="90"></a></li>
                            <li><a id="skill-html5" href="#" class="html5 tool-tip" title="85"></a></li>
                            <li><a id="skill-php" href="#" class="php tool-tip" title="80"></a></li>
                            <li><a id="skill-mysql" href="#" class="mysql tool-tip" title="70"></a></li>
                        </ul>
                    </div>
                </td>

                <!-- Graph Key -->
                <td class="Vertvalues">
                    <label class="jquery">Jquery</label>
                    <label class="css3">Css3</label>
                    <label class="html5">Html5</label>
          ...

CSS

/* ========================================================
   Demo Styles
   ===================================================== */
body {
    font-family: 'Yanone Kaffeesatz';
    background: #2a2a2a url("http://jenniferperrin.com/image/background.gif") 0 0 repeat;
    margin-left: 20px;
}

h1, h2 {
    display: block;
    font-family: 'Yanone Kaffeesatz';
    color: rgba(255,255,255,0.4);
    text-decoration: none;
}
h1 { font-size: 46px; margin: 0 0 6px 0; text-align: center; }
h2 { font-size: 36px; margin: 0 0 15px 25px; }
h1:hover, h2:hover {
    color: rgba(255,255,255,0.2);
}
p {
    margin: 20px 0 4px 6px;
    font-family: 'Yanone Kaffeesatz';
    font-size: 16px;
    color: rgba(255,255,255,0.6);
    text-align: center;
}
a {
    color: rgba(255,255,255,0.4);
    text-decoration: none;
}
a:hover {
    color: rgba(255,255,255,0.3);
}
/* ========================================================
   Grid System
   ===================================================== */
[class*='col-'] {
  float: left;
}
.col-1 {
  width: 100%;
}
.col-1-2 {
  width: 50%;
}
.grid:after {
  content: "";
  display: table;
  clear: both;
}
.grid-pad {
  padding: 0 10px 10px 10px;
}
.grid-clear {
    clear:left;
}

/* ========================================================
   Vertical Graph Styles
   ===================================================== */
#vGraph-cont {
    height: 200px;
    width: 200px;
}
#vSkill-rating {
    margin-bottom: 25px;
    margin-top: 15px;
}

.vGraphtable {
    float: none;
}
#vGraph-cont table {
    border-collapse: collapse;
    border-spacing: 0;
}
#vSkill-rating {
    margin-top:15px;
    margin-bottom:25px;
}
#vSkill-rating .vGraph{
    height: 200px;
    width: 200px;
    margin-right:10px;
    overflow:hidden;
}
.vGraphtable td {
    vertical-align: top; color:#666;
}
.vGraphtable label {
    font-size: 16px;
    padding:2px 10px;
    color: #FFF;
    text-align: center;
    margin-bottom:14px;
    height:25px;
    display: block;
   ...

JavaScript

$(document).ready(function() {
    // Web Development Skill Bars
    $('#skill-jquery').animate( { height: '80%' }, 2500);
    $('#skill-css3').animate( { height: '90%' }, 2500);
    $('#skill-html5').animate( { height: '85%' }, 2500);
    $('#skill-php').animate( { height: '80%' }, 2500);
    $('#skill-mysql').animate( { height: '70%' }, 2500);
    
    // Graphic Design Skill Bars
    $('#skill-photoshop').animate( { height: '85%' }, 2500);
    $('#skill-illustrator').animate( { height: '95%' }, 2500);
    $('#skill-indesign').animate( { height: '65%' }, 2500);
    $('#skill-flash').animate( { height: '60%' }, 2500);
    $('#skill-captivate').animate( { height: '80%' }, 2500);
    
    // Another Skill Set Skill Bars
    $('#skill-another1').animate( { height: '80%' }, 2500);
    $('#skill-another2').animate( { height: '90%' }, 2500);
    $('#skill-another3').animate( { height: '85%' }, 2500);
    $('#skill-another4').animate( { height: '80%' }, 2500);
    $('#skill-another5').animate( { height: '70%' }, 2500);
    
    // And Yet Another Skill Bars
    $('#skill-another6').animate( { height: '85%' }, 2500);
    $('#skill-another7').animate( { height: '95%' }, 2500);
    $('#skill-another8').animate( { height: '65%' }, 2500);
    $('#skill-another9').animate( { height: '60%' }, 2500);
    $('#skill-another10').animate( { height: '80%' }, 2500);
    
    // Tooltip
    $('.tool-tip').hover(function(){
        // on Hover
        var title = $(this).attr('title');
        $(this).data('tipText', title).removeAttr('title');
        $('<p class="tooltip"></p>')
        .text(title)
        .appendTo('body')
        .fadeIn('slow');
    }, function() {
        // Hover out
        $(this).attr('title', $(this).data('tipText'));
        $('.tooltip').remove();
    }).mousemove(function(e) {
        var mousey = e.pageY + 10;
        var mousex = e.pageX + 10;
        $('.tooltip')
        .css({ top: mousey, left: mousex })
    });
});
    
/**
 * Rolling Links
...