Disposizione del testo intorno a un’immagine

Testo sagomato Mi è capitato spesso di avere l’esigenza di far scorrere del testo intorno a un’immagine trasparente, soprattutto quando […]
Disposizione del testo intorno a un’immagine

Testo sagomato

Mi è capitato spesso di avere l’esigenza di far scorrere del testo intorno a un’immagine trasparente, soprattutto quando ero all’inizio della mia strada come webdesigner. Per fare ciò purtroppo non esistono degli strumenti online del tutto performanti, alcuni non permettono di modellare interi paragrafi, altri si limitano ad allineare il testo seguendo solo una disposizione obliqua.

Pochi giorni fa, leggendo tra i miei feed rss, sono arrivato a questo sito: baconforme.com.
Bacon, è un plug-in jquery che permette di modellare il testo secondo diverse forme: curva, obliqua e ondulata. Perfetto per allineare un intero testo intorno ad un’immagine trasparente. Vediamo come funziona:

Codice html

Innanzitutto ho allegato i file che servono al funzionamento del plug-in:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="bacon.jquery.js"></script>
<link rel="stylesheet" type="text/css" href="bacon.jquery.css" />

Fatto questo, di seguito ho impostato due div contenitori (shoe e bag) per due esempi differenti: con curva e modo obliquo.

<div class="shoe">
    <p class="baconMe">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets.</p>
    <img src="shoe.png" alt="shoes" />
</div>

<div class="bag">
    <p class="baconLine">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions.</p>
    <img src="bag.png" alt="bag" />
</div>

Allineare il testo

Successivamente ho incollato il codice javascript che serve a modellare il testo attraverso dei parametri.

Il primo pezzo di codice si riferisce al paragrafo con classe baconMe, impostando i valori delle x ed y riusciamo a spostare il testo e formare delle curve che seguono le forme dell’immagine.

La seconda parte del codice javscript è per il paragrafo con classe baconLine, settando il valore del parametro step riusciamo a dare un angolo di inclinazione che segue l’immagine in modo obliquo.

<script type="text/javascript">
$(document).ready(function() {
  $(".baconMe").bacon({
          'type' : 'bezier',
          'c1' : { x : -160,      y : 0  },
          'c2' : { x : -140,      y : 70 },
          'c3' : { x : 350,       y : 140 },
          'c4' : { x : -400,      y : 210 },
		   'align':'right'
      }
  );
   
  $(".baconLine").bacon({
          'type'   : 'line',
          'step'   : 2,
          'align'  : 'right'
      }
  );
});
</script>

Come hai potuto notare far funzionare il plug-in non è complicato e può tornarci molto utile per progettare qualcosa di nuovo.

Ne conosci altri?

Se conosci altri plug-in simili e vuoi condividerli, scrivi pure nei commenti o sulla nostra fanpage 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github