JSFiddle - React, Tailwind, and code Playground

Horizontal: Multi-Animated Skill Chart with Rolling Links

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="graph-cont">
        <div class="horGraph">
            <table id="skill-rating">
                <tbody>

                <tr>
                    <td class="twenty"><div class="line20">0</div></td>
                    <td class="twenty"><div class="line20">20</div></td>
                    <td class="twenty"><div class="line20">40</div></td>
                    <td class="twenty"><div class="line20">60</div></td>
                    <td class="twenty"><div class="line20">80</div></td>
                    <td class="twenty noBorder"><div class="line20">100</div></td>

                    <!-- Graph Key -->
                    <td class="values20">
                    <label class="jquery">Jquery</label>
                    <label class="css3">Css3</label>
                    <label class="html5">Html5</label>
                    <label class="php">Php</label>
                    <label class="mysql">MySql</label>
                    </td>
                </tr>

                <tr>
                    <div class="skill-container">
                        <ul>
                            <li><a id="skill-jquery" href="#" class="jquery tool-tip" title="10"></a></li>
                            <li><a id="skill-css3" href="#" class="css3 tool-tip" title="9"></a></li>
                            <li><a id="skill-html5" href="#" class="html5 tool-tip" title="7"></a></li>
                            <li><a id="skill-php" href="#" class="php tool-tip" title="8"></a></li>
                            <li><a id="skill-mysql" href="#" class="mysql tool-tip" title="6"></a></li>
                       ...

CSS

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

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: 10px 0 0 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;
}

/* ========================================================
   Graph Styles
   ===================================================== */
#graph-cont {
    margin: 20px 0 0 20px;
    height: 200px;
    width: 200px;
}
.horGraph {
    float: left;
    margin-top: -200px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
td {
    height: 200px;
    border-right: 1px dotted #555;
    border-top: 1px dotted #555;
    border-bottom: 1px dotted #555;
}
td:first-child {
    border-left: 1px dotted #555;
}
td:last-child {
    border: none;
}
.noBorder {
    border: none;
}
.ten {
    min-width: 19px;
}
.twenty {
    min-width: 39px;
}
.line10, .line20 {
    height: 200px;
    margin-top: -26px;
    margin-left: -5px;
    font-size: 10px;
    color: #fff;
}

.horGraph label {
    font-size: 16px;
    padding:2px...

JavaScript

$(document).ready(function() {
    // Web Development Skill Bars
    $('#skill-jquery').animate( { width: '100%' }, 2500);
    $('#skill-css3').animate( { width: '90%' }, 2500);
    $('#skill-html5').animate( { width: '70%' }, 2500);
    $('#skill-php').animate( { width: '80%' }, 2500);
    $('#skill-mysql').animate( { width: '60%' }, 2500);
    
    // Graphic Design Skill Bars
    $('#skill-photoshop').animate( { width: '80%' }, 2500);
    $('#skill-illustrator').animate( { width: '100%' }, 2500);
    $('#skill-indesign').animate( { width: '60%' }, 2500);
    $('#skill-flash').animate( { width: '40%' }, 2500);
    $('#skill-captivate').animate( { width: '70%' }, 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 mousex = e.pageX + 20;
        var mousey = e.pageY + 10;
        $('.tooltip')
        .css({ top: mousey, left: mousex })
    });
});
    
/**
 * Rolling Links
 **/
var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined ||
                            document.body.style['MozPerspective'] !== undefined;

function linkify( selector ) {
    if( supports3DTransforms ) {
        
        var nodes = document.querySelectorAll( selector );

        for( var i = 0, len = nodes.length; i < len; i++ ) {
            var node = nodes[i];

            if( !node.className || !node.className.match( /roll/g ) ) {
                node.className += ' roll';
                node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>';
            }
        };
    }
}

linkify( 'a' );