Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

Finestra news con effetto fade (news ticker)

In questo articolo creeremo, partendo da zero, una finestra contenente un elenco di news che in sequenza appariranno a video con un effetto a dissolvenza(fade).
Utilizzeremo jQuery esclusivamente per gestire le animazioni e grazie a Javascript realizzeremo le funzioni necessarie per implementare la nostra finestra delle news. Per completare l’opera e dare al box la parvenza di finestra, forniremo una semplice barra del titolo compresa di icona per la chiusura della finestra.
In fondo all’articolo è possibile provare e scaricare il codice completo.

Vediamo innanzitutto la parte html che oltre ad essere molto semplice ci fornisce una prima idea di come sarà il nostro news ticker:

<div id='box'>
     <div id='intestazione'>
          <div id='titolo'>Le News</div>
          <img id='chiudi' src='chiudi.png' border='0' alt='Chiudi' align='right'/>
     </div>
     <p>... Testo della news numero 1 ...</p>
     <p>... Testo della news numero 2 ...</p>
     <p>... Testo della news numero 3 ...</p>
     <p>... Testo della news numero 4 ...</p>
</div>

La regola per riempire il box è semplice:
il testo di ciascuna news è in un paragrafo (<p>) diverso.
Questa sintassi va necessariamente rispettata perchè solo in questo modo Javascript sarà in grado di leggere il contenuto del box riconoscendo le news che lo compongono.
All’interno del paragrafo siamo liberi di definire link, immagini o oggetti oltre al classico testo.
Passiamo quindi al codice Javascript che si compone essenzialmente di 5 funzioni. Il numero di funzioni non deve spaventare, infatti alcune di esse si compongo di poche righe. Tale scelta nasce dall’esigenza di suddividere e organizzare il codice in maniera logica e funzionale.

// VELOCITA' TRANSIZIONE NEWS (ESPRESSA IN SECONDI)
var speed = 5;

// VARIABILI GLOBALI (NOTIZIE SARA' L'ARRAY CHE CONTERRA' LE NEWS)
var index = 0;
var limite = 0;
var notizie = null;
var rotazione = null;

// FUNZIONE DA CHIAMARE ALLO START DEL BOX NEWS
function start(id_div){
	var box = document.getElementById(id_div);
	$(box).mouseenter(function(){stop();});
	$(box).mouseleave(function(){play();});
	$('#chiudi').click(function(){ $(box).fadeOut();});
	notizie = box.getElementsByTagName('p');
	limite = notizie.length;
	inizializzazione(notizie);
	newsIn();
}
// FUNZIONE NECESSARIA ALL'INIZIALIZZAZIONE
function inizializzazione(elementi){
	for(i=0; i<elementi.length; i++){
		elementi[i].style.display='none';
	}
}
// FUNZIONE PER NEWS IN INGRESSO
function newsIn(){
	rotazione = setTimeout('newsOut()', (speed*1000));
	$(notizie[index]).fadeIn(1000);
}
// FUNZIONE PER NEWS IN USCITA
function newsOut(){
	$(notizie[index]).fadeOut(1000, function(){
		index++;
		if(index==limite){
			index = 0;
		}
		newsIn();
	});
}
// FUNZIONE PER LO STOP DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function stop(){
	clearTimeout(rotazione);
}
// FUNZIONE PER LA RIPARTENZA DELL'ANIMAZIONE (ATTIVA AL PASSAGGIO DEL MOUSE)
function play(){
	clearTimeout(rotazione);
	rotazione = setTimeout('newsOut()', 1000);
}

Il codice è abbastanza commentato.
La funzione da invocare per dare inizio all’animazione è: start(id_div).
Tale funzione, con il supporto di altre funzioni e variabili globali, ha il compito di individuare la finestra delle news tramite id, prelevare i testi delle news e realizzare un array, notizie, che li conterrà. Inoltre la funzione ha il compito di assegnare, tramite jQuery, delle funzioni agli eventi legati al movimento del mouse sulla finestra.
Infatti le funzioni stop() e start() vengono richiamate quando l’utente entra e esce con il puntatore del mouse dalla finestra o per interrompere l’animazione favorendo la lettura della news o per farla ripartire.
Le funzioni newsIn() e newsOut() effettuano lo “scambio” delle news utilizzando l’effetto fade fornito da jQuery.
Da notare infine la temporizzazione che unisce le due funzioni sopracitate, gestibile tramite la varibile speed all’inizio del codice.

Per avviare la finestra con le news è necessaria la seguente riga Javascript dopo aver definito il div nell’html:

<script type='text/javascript'>
     start('box');
</script>

Come si potrà vedere dal codice completo presente online e scaricabile da questa pagina, la finestra è stata formattata con alcune semplici regole CSS che chiunque può personalizzare per adattare il layout a quello del proprio sito.

Cliccando qui è possibile vedere in azione il codice.

Cliccando qui è possibile scaricare il codice.

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

1 Comment

  1. Finestra news con effetto fade (news ticker) – v 2.0 news da file esterno | Fabio Donatantonio

    23rd Ott 2012 - 20:50

    […] questo articolo vedremo una variante del News Ticker javascript descritto qui. Molti utenti negli ultimi mesi mi hanno chiesto se era possibile reperire le news da un file […]

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×