JSFiddle - React, Tailwind, and code Playground

Vertical: 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">
            <table class="graphtable" id="skill-rating">
                <tbody>
                <tr>
                
                <td>
                    <!-- Graph -->
                    <div class="graph">
                        <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="skill-container">
                        <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="values">
                    <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; 
}

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 {
    height: 200px;
    width: 200px;
}
#skill-rating {
    margin-bottom: 25px;
    margin-top: 15px;
}

.graphtable {
    float: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
#skill-rating {
    margin-top:15px;
    margin-bottom:25px;
}
#skill-rating .graph {
    height: 200px;
    width: 200px;
    margin-right:10px;
    overflow:hidden;
}
.graphtable td {
    vertical-align: top; color:#666;
}
.graphtable label {
    font-size: 16px;
    padding:2px 10px;
    color: #FFF;
    text-align: center;
    margin-bottom:14px;
    height:25px;
    display: block;
    line-height:24px;
    border-radius: 6px;
}
.graphtable label:hover {...

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);
    
    // 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
 **/
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' );