Arctext.js, du texte incurvé avec CSS3 et jQuery

9 juillet 2012

CSS3 est capable de faire pivoter les lettres d’un mot, à condition que chacune d’entre elles soit englobée dans un élément HTML pour l’identifier et lui appliquer la rotation, mais cela devient vite compliqué d’obtenir un mot qui suit une courbe… C’est là qu’intervient Arctext.js !

Suivez la courbe

Basé sur l’excellent plugin jQuery Lettering.js qui permet de donner un style différent à chaque lettre d’une chaîne de caractère, Arctext.js permet de mettre en place du texte avec une trajectoire courbée : pour cela, il calcule automatiquement la rotation de chaque lettre ainsi que leur position pour former un arc de cercle parfait, le tout positionné en CSS. La courbure est paramétrable via plusieurs options et peut se tourner vers le haut comme vers le bas.

Installation basique

Avant toute chose, on fait l’appel au framework jQuery et à Arctext.js.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>

Ensuite, on déclare notre mot (ou notre phrase) dans un élément HTML identifié par une classe ou un id CSS.

<div class="phrase">Megaptery</div>

On termine par l’appel du script Arctext.js sur notre sélecteur jQuery. Et c’est terminé, votre texte sera automatiquement courbé. Par défaut, il est incurvé au maximum.

$('.phrase').arctext();

Les options

Pour personnaliser au mieux le rendu final, vous pouvez utilisez les quelques paramètres disponibles.

  • radius : entier qui définit le degré de courbure (plus cette valeur est petite, plus le texte est courbé). Courbure qui dépend de la taille de la police, et donc du style appliqué. Ce paramètre peut être définie à -1 pour que le texte reste droit.
    $('.phrase').arctext({radius: 300});
    

    Résultat :


  • dir : valeur qui définit le côté de la courbe. 1 pour une courbe vers le bas, -1 pour une courbe vers le haut.
    $('.phrase').arctext({radius: 400, dir: -1});
    

    Résultat :


  • rotate : booléen (true par défaut) qui définit si les lettres doivent être effectuer une rotation ou non.
    $('.phrase').arctext({radius: 500, rotate: false});
    

    Résultat :


Il existe également l’option fitText qui donne la possibilité de combiner Arctext à fitText pour avoir des blocs de texte responsive, ou encore animation pour générer une animation CSS3 avec contrôle de la vitesse et de l’effet easing. Voici un exemple de code pour modifier et animer la courbure d’un texte au clic d’un bouton :

$('#button').on('click', function() {
   $('.phrase').arctext('set', {
      radius: 300, 
      dir: -1,
      animation: {
         speed: 300,
         easing: 'ease-out'
      }
   });
   return false;
});

Arctext.js est un plugin très spécifique mais qui peut s’avérer pratique dans certains cas et facile à utiliser. Le script a été développé par l’équipe de Codrops, reconnu pour ses développements HTML5 / CSS3 / jQuery novateurs et de grande qualité.

Requis : jQuery
Compatibilité : Navigateurs compatibles CSS3
Démonstration : http://tympanus.net/Development/Arctext/
Licence : MIT

Commentaires

  • marche nickel sous chrome et IE9 :)

  • shajgonzalez

    g1Dq – Recently I used to be so very lacking in cash and debts were eating me from all sides! That was Right Until i found out how to make money.. on the Internet. I visited surveymoneymaker point net, and started filling in surveys for money, and yes! I have been really more able to do my things! i am happy, that I did this!! With all the financial stress these years, I really hope all of you will give it a chance. poBj