BlinkText Mootools Class - Effetto blink per stringhe di testo

0 voti

Ago 19 |09:14

blinktext

Questo è il mio primo articolo della sezione Sviluppo, come anticipato nella descrizione delle nuove funzionalità e caratteristiche introdotte nella versione 3.0 di Luscarpa.eu, questa sezione prevede una serie di notizie, tutorial e sviluppi relativi al mondo del web development.

Oggi vado a presentare la mia ultima classe realizzata per estendere le funzionalità di Mootools: BlinkText.

Per chi già non lo conoscesse, Mootools è un framework Javascript orientato agli oggetti, compatto e modulare con lo scopo di semplificare il lavoro degli sviluppatori fornendo una serie di funzionalità che possono essere estese e/o riutilizzate senza doverle di volta in volta riscrivere. Rimando al sito ufficiale per ottenere maggiori dettagli in merito: http://mootools.net.

BlinkText è una classe che estende Mootools e consente di effettuare l'effetto blink sul testo, semplicemente impostando il colore di partenza (es. nero) e quello finale (es. rosso) si otterranno delle sfumature che portano il testo dal nero al rosso e successivamente dal rosso al nero. Tutto ciò può essere controllato mediante delle azioni che consentono di far partire o fermare l'effetto. La classe inoltre consente di impostare sia il numero massimo di volte in cui l'effetto viene ripetuto sia la durata di ogni singola transazione.

La classe Mootools

var BlinkText = new Class({
 
  //implements
  Implements: [Options,Events],
 
  //options
  options: {
    from: '#000000',
    to: '#f00000',
    duration: 500,
    times: 3
  },
 
  //initialization
  initialize: function(el,options) {
    //set options
    this.setOptions(options);
    this.element = $(el);
    this.times = 0;
  },
 
  //starts the blink effect
  start: function(times) {
    this.element.setStyle('color',this.options.from);
 
    if(!times) times = this.options.times * 2;
    this.running = 1;
    // Fire start event
    this.fireEvent('start').run(times -1);
  },
 
  //stops the blink effect
  stop: function() {
    this.running = 0;
    // Fire stop event
    this.fireEvent('stop');
  },
 
  run: function(times) {
    //make it happen
    var self = this;
    var new_to = self.element.getStyle('color') == self.options.from ? self.options.to : self.options.from;
 
    self.fx = new Fx.Tween(self.element,{
      duration: self.options.duration / 2,
      onComplete: function() {
        // Fire tick event
        self.fireEvent('tick');
        if(self.running && times)
        {
          self.run(times-1);
        }
        else 
        {
          if(self.element.getStyle('color') != self.options.from) self.run(0);
          self.fireEvent('complete');
        }
      }
    }).start('color',new_to);
  }
});

Opzioni supportate dalla classe:

from: (default #000) Colore di partenza.
to: (default #f00) Colore di arrivo.
duration: (default 500) Durata dell'effetto.
times: (default 10) Numero di volte per cui l'effetto verrà ripetuto.

Eventi inclusi nella classe:

onComplete: Invocato quando viene completato l'effetto.
onStart: Invocato quando viene lanciato l'effetto.
onStop: Invocato quando viene fermato l'effetto.
onTick: Invocato ad ogni ricorsione.

Esempi di utilizzo

window.addEvent('domready',function() {
 
  //settings demo1
  var demo1 = new BlinkText('demo1',{
    times: 10
  })
 
  $('demo1_stop_link').addEvent('click',function(e) { e.stop(); demo1.stop(); });
  $('demo1_start_link').addEvent('click',function(e) { e.stop(); demo1.start(); });
 
 
  //settings demo2
  var demo2 = new BlinkText('demo2',{
    times: 2,
    onComplete: function() {
      alert('complete!');
    },
    onStart: function() {
      alert('started!');
    },
    onStop: function() {
      alert('stopped!');
    },
    onTick: function() {
      alert('tick!');
    }
  })
 
  $('demo2_stop_link').addEvent('click',function(e) { e.stop(); demo2.stop(); });
  $('demo2_start_link').addEvent('click',function(e) { e.stop(); demo2.start(); });
 
 
});