jQuery: creare un grafico animato per le nostre skill

  • jQuery
  • Gabriele Romanato
jQuery: creare un grafico animato per le nostre skill

Se avete creato un portfolio online o una V-Card vorrete sicuramente mostrare con un grafico animato le vostre skill, ossia i settori in cui siete più ferrati. In questo articolo vedremo come creare uno di questi grafici con jQuery.

Requisiti

Per realizzare un particolare tipo di animazione sulle barre del grafico ci occorre il plugin Easing. La nostra marcatura sarà quindi la seguente:


<body>
	<div id="skills"></div>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script type="text/javascript" src="jquery.easing.js"></script>
	<script type="text/javascript">
	  $(function() {
	  
		// Il nostro codice
		
	  });
	</script>
</body>

Codice CSS

Con jQuery creeremo una marcatura ripetuta di questo tipo:


<div class="row">
	<h2>Skill</h2>
	<p data-width="valore"></p>
</div>

Ecco il codice CSS:


@import url(http://fonts.googleapis.com/css?family=Open+Sans);

body {
    font: 100% 'Open Sans', sans-serif;
}

#skills {
    width: 40em;
    margin: 2em auto;
}

#skills div.row {
    overflow: hidden;
    margin-bottom: 1em;
}

#skills h2 {
    font-size: 1.5em;
    text-transform: uppercase;
    float: left;
    width: 200px;
    padding-bottom: 0.5em;
    height: 1em;
    line-height: 1;
}

#skills p {
    width: 0em;
    height: 1.5em;
    background: #069;
    float: left;
}
​

Codice jQuery

Con jQuery dobbiamo:

  1. Creare un oggetto letterale che associ il nome di una skill alla larghezza della barra visualizzata.
  2. Associare tale larghezza all'elemento HTML corrispondente e generare la relativa marcatura.
  3. Animare in sequenza le barre utilizzando la coda di animazioni con un certo ritardo tra un effetto e l'altro.

Ecco il codice jQuery:


var Skills = new function() {

    var wrapper = document.getElementById('skills');

    var $skills = {
        html5: '20em',
        php: '18em',
        jquery: '20em',
        wordpress: '18em',
        css: '20em'
    };


    var create = function() {

        var html = '';
        for (var i in $skills) {

            var skill = i;
            var value = $skills[i];

            html += '<div class="row">';
            html += '<h2>' + skill + '</h2>';
            html += '<p data-width="' + value + '"></p>';
            html += '</div>';

        }


        $(wrapper).html(html);

    };

    var animation = function() {
        var delay = 0;
        $('p[data-width]', wrapper).each(function() {

            var $p = $(this);
            $p.queue('width', function(next) {

                $p.delay(delay).animate({
                    width: $p.data('width')
                }, 600, 'easeInOutExpo', next);

            });

            $p.dequeue('width');
            delay += 300;
        });

    };

    this.init = function() {
        create();

        setTimeout(function() {
            animation();
        }, 500);

    };

}();


Skills.init();

Potete visionaree l'esempio finale in questa pagina.

Ti potrebbe interessare anche

Torna su