Acciderbolina! Il post che vedete qui sotto è praticamente inutile: avevo bisogno di quel plugin di jquery ed ho scoperto che non esiste più il sito che me lo forniva. Mi ritrovo a dover riscrivere due righe riguardo chi ha bisogno di questo effetto.
Effettuando altre ricerca, ho trovato un link interessante che sfrutta un plugin scritto sfruttando .animate() di jquery:
blog sul plugin pulse per jquery
Il resto dell’articolo lo lascio per “memoria storica”.
Il plugin di cui voglio parlare oggi è pulse. Pulse.jquery.js è un plugin che ci permette di far pulsare una porzione di testo, ma non solo. Il plugin può avere scopi più ampi, vediamo ora di fare qualche esempio per renderci davvero conto di che cosa può fare:
Riporto di seguito e ben commentati alcuni esempi proposti direttamente dal sito del plugin jquery.
Esempio semplice
<html>
<head>
<title>Pulse Plugin</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="pulse.jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#payattention').pulse({
speed: 100,
opacityRange: [0.4,0.9]
});
});
</script>
</head>
<body>
<div id="payattention">Pay attention</div>
</body>
</html>
In questo esempio (che vi consiglio di provare) avrete la possibilità di vedere pulsare la scritta “Pay attention” sul vostro browser. È importante, a questo punto, definire il significato dei paramentri che si possono passare al metodo pulse. Quali, quanti sono, che cosa possono fare:
- backgroundColors
- textColors
- borderColors
- opacityRange
- speed
- duration
- runLength
backgroundColors: ['#ccc','#666','#999','#000']
textColors: ['#ccc','rgb(200,200,200)']
borderColors: ['red','blue']
Questi tre parametri ci aiutano a configurare il comportamento di pulse. Tra parentesi quadre, dobbiamo indicare quali colorazioni assumeranno rispettivamente sfondo, testo e bordo del nostro elemento, ad ogni pulsazione. Non ci sono limiti nel nnumero di colori che si vogliono passare. Non solo: in questo esempio ho passato il colore nel formato #CCC (CSS2.1) ma dovete sapere che potete usare la sintassi che preferite:
- ‘#ccc’
- ‘#cccccc’
- ‘rgb(200,200,200)’
Se io ho utilizzatto quella più compatta è solo per comodità e compattezza del codice, non per altro.
Un altro fatto importante da sapere, è che non è possibile modificare il bordo del nostro elemento se prima non è stato assegnato a questo uno spessore. Infatto il bordo è 0px di default. Visto che stiamo usando jquery, modificheremo il nostro elemento sempre con jquery (senza uso di plugin):
$(‘#payattention’).css({‘border’:’1px dashed’});
(Ovviamente questo è solo un esempio: potete usare lo spessore che preferite ed anche lo stile del bordo che preferite)
opacityRange
Questo parametro ci permette di scegliere il livello di opacità del nostro elemento. Il livello di opacità va passato come valore compreso tra 0.0 ed 1.0. La logica è la stessa dei tre parametri precendenti: possiamo avere più livelli di opacità per ogni pulsazione:
- [0.2,0.9]
- [0.1,0.2,0.3,0.4]
- e via dicendo …
speed, duration, runLength
Infine, abbiamo i parametri speed che indicano la durata della singola pulsazione in millisecondi. Quindi se volessimo fare si che ogni pulsazione duri mezzo secondo, utilizzeremo la sintassi ‘speed: 500′. duration invece lo dovremo utilizzare per indicare la dudata di tutta l’animazione.
A di, ci sarebbe anche sto runLength, ma se devo dirla tutta non ho ben capito come usarlo per cui passo =).
