Arctext, tipografia radicale con jQuery

Plugin quasi imprescindibile per gli amanti della tipografia creativa, quello che presentiamo nel seguente tutorial, e che permette di ruotare il testo a piacere sul layout, disponendolo per esempio attorno ad un logo circolare, ma anche animarlo con degli effetti molto piacevoli tramite click su appositi pulsanti.

Scaricate l’intero pacchetto in fondo all’articolo, e vediamo nel dettaglio come funzionano le righe Javascript che impostano le diverse opzioni di visualizzazione testuale.

Prima di iniziare, assicuriamoci che nella pagina index.html siano collegati ai relativi percorsi i files Css e Js necessari:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.arctext.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

Gli esempi presenti nel pacchetto sono 4, vediamoli uno per uno:

ESEMPIO 1

$example1.arctext({radius: 300})

Il Raggio è impostato su 300, le lettere si adagiano su un arco, la direzione è quella di default.

ESEMPIO 2

$example2.arctext({radius: 400, dir: -1})

Il Raggio è impostato su 400, la direzione (-1) è invertita rispetto alla precedente, dall’alto verso il basso.

ESEMPIO 3

$example3.arctext({radius: 500, rotate: false})

Raggio 500, le singole lettere non ruotano, rimanendo allineate sul loro asse (il valore di “rotate” cambia in false).

ESEMPIO 4

$example4.arctext({radius: 300})

Nell’esempio di default, viene impostato il solo Raggio su 300: ci sono poi 4 differenti pulsanti, ognuno con i propri parametri.

Nel primo abbiamo:

radius: 140, dir: -1

Nel secondo abbiamo un esempio di animazione con durata 300ms ed effetto easing (decelerazione):

radius: 300, dir: -1, animation: 300ms ease-out

Nel terzo un’animazione con durata 300ms senza easing:

radius: 200, dir: 1, animation: 300ms

Il quarto pulsante resetta l’oggetto allo stadio di partenza.

Ed ecco la porzione di Javascript che permette questa piccola meraviglia:

<script type="text/javascript">
			var $headline = $('#headline').hide();

			var $word1		= $('#arc-wrapper').find('h3').hide();
			var $word2		= $('#arc-wrapper').find('h4').hide();

			var $example1	= $('#example1').hide();
			var $example2	= $('#example2').hide();
			var $example3	= $('#example3').hide();
			var $example4	= $('#example4').hide();

			google.load('webfont','1');

			google.setOnLoadCallback(function() {
				WebFont.load({
					google		: {
						families	: ['Montserrat','Concert One']
					},
					fontactive	: function(fontFamily, fontDescription) {
						init();
					},
					fontinactive	: function(fontFamily, fontDescription) {
						init();
					}
				});
			});

			function init() {

				$headline.show().arctext({radius: 400});

				$word1.show().arctext();
				$word2.show().arctext({radius: 148, dir: -1});

				$example1.show().arctext({radius: 300});
				$example2.show().arctext({radius: 400, dir: -1});
				$example3.show().arctext({radius: 500, rotate: false});
				$example4.show().arctext({radius: 300});

				$('#button_set').on('click', function() {
					$example4.arctext('set', {
						radius		: 140,
						dir			: -1
					});
					return false;
				});
				$('#button_anim1').on('click', function() {
					$example4.arctext('set', {
						radius		: 300,
						dir			: -1,
						animation	: {
							speed	: 300,
							easing  : 'ease-out'
						}
					});
					return false;
				});
				$('#button_anim2').on('click', function() {
					$example4.arctext('set', {
						radius		: 200,
						dir			: 1,
						animation	: {
							speed	: 300
						}
					});
					return false;
				});
				$('#button_reset').on('click', function() {
					$example4.arctext('set', {
						radius		: 300,
						dir			: 1
					});
					return false;
				});

			};
		</script/>

Cambiate i valori nei vari esempi per piegare Arctext alle vostre esigenze, e buon lavoro!

FONTE