Testo e immagini lampeggianti con CSS o javascript

Come inserire in un blog, o in una pagina web, un testo o una immagine lampeggianti con il CSS3 o il javascript personalizzando la durata del lampeggio e inserendo collegamenti e formattazione

Con l'ausilio di programmi di grafica come Photoshop o Gimp si possono creare delle immagini animate in formato GIF allo scopo per esempio di creare dei pulsanti lampeggianti.

Nel linguaggio HTML esiste pure il tag blink per creare testo lampeggiante, un tag che però è stato deprecato da diverso tempo. In questo post vedremo come creare del testo e delle immagini lampeggianti tramite il linguaggio CSS3 e con il javascript.

La scelta del CSS3 è migliore di quella del javascript, perché non rallenta in modo significativo l'apertura della pagina da parte dei navigatori. Questa personalizzazione può essere interessante per evidenziare un particolare paragrafo e per incentivare i click su un elemento. Per maggiore chiarezza dividerò il post in 4 sezioni: testo lampeggiante con i CSS, immagini lampeggianti con i CSS, testo lampeggiante con i javascript e testo lampeggiante con i javascript. Inserirò anche dei collegamenti e del testo formattato di esempio che naturalmente possono essere adattati alle singole esigenze o sostituiti da testo piano. Il tag target="_blank" serve unicamente per far aprire i collegamenti in un'altra scheda e può essere tralasciato.

Chi non avesse alcuna conoscenza di HTML e CSS può scaricare e consultare il mio ebook gratuito Guida all'HTML e al CSS in cui sono illustrate le nozioni propedeutiche per neofiti.

1) TESTO LAMPEGGIANTE CON IL CSS3

Un esempio di codice di base da usare per questa personalizzazione è il seguente:

<div class="blink_text" >Iscriviti alla Pagina Facebook di <span><a href="https://www.facebook.com/ideepercomputeredinternet/" target="_blank">IpCeI</a></span></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
color: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a {color:#f00;}
@keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>

che se incollato in un Editor HTML Online produce questo risultato

e qui c'è la demo

Iscriviti alla Pagina Facebook di IpCeI

Ovviamente possono essere modificati i codici dei colori e gli altri parametri. Il lampeggiamento è dato dai tag evidenziati di giallo. Viene impostato un lampeggiamento della durata di 1 secondo (personalizzabile) inserendo una opacità 1.0 intervallata a una opacità 0.0 che porta a un lampeggiamento di mezzo secondo. 

2) IMMAGINE LAMPEGGIANTE CON IL CSS3

Un codice di esempio per il lampeggiamento di una immagine è il seguente:

<div class="blink_text" ><a href="https://www.facebook.com/ideepercomputeredinternet" target="_blank"><img src="https://lh5.googleusercontent.com/-GTnWMP0dzfo/ThsSsyrKqqI/AAAAAAAATzs/O3amW2MnLNE/s100/colibr%2525C3%2525AC.gif" /></a></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
}
@keyframes blinker { 
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>

Il concetto è lo stesso, solo che al posto di un testo viene inserita una immagine attraverso il suo link diretto. Ovviamente possono essere personalizzati tutti i parametri a partire dall'URL collegato all'URL della immagine.

Ecco la demo del codice precedente a cui è stata aggiunto l'allineamento al centro.

Adesso vediamo come realizzare gli stessi effetti con il javascript.

3) TESTO LAMPEGGIANTE CON IL JAVASCRIPT

Un codice lampeggiante di esempio può essere il seguente:

<div id="blink" style="text-align: center;"> <a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><span style="color: #00f; font-size: 18px; font-weight:bold;">Sottoscrivi i feed di</span> <span style="color: #f00; font-size: 22px; font-weight:bold;"> Idee per Computer ed Internet</span></a> </div>
<script language="JavaScript">
function blink_one() {
document.getElementById('blink').style.visibility='visible';
setTimeout('blink_two()',700);
}
function blink_two() {
document.getElementById('blink').style.visibility='hidden';
setTimeout('blink_one()',700);
}
blink_one();
</script>

che produce questo risultato

Sottoscrivi i feed di Idee per Computer ed Internet

dove si possono personalizzare i testi colorati di blu, l'URL del collegamento, i codici dei colori e gli altri parametri della formattazione come grassetto e dimensione dei font. Il sistema per ottenere il lampeggiamento consiste nella creazione di un id blink che poi viene ripreso in due funzioni che alternano visibilità e nascondimento (hidden) della durata di 700 millisecondi (personalizzabili).

4) IMMAGINI LAMPEGGIANTI CON IL JAVASCRIPT

Infine ecco il codice javascript per creare un lampeggiamento di immagini:

<div id="blink2" style="text-align: center;">
<a href="http://feeds.feedburner.com/ideepercomputeredinternet/zUQN" target="_blank"><img src="https://lh5.googleusercontent.com/-GTnWMP0dzfo/ThsSsyrKqqI/AAAAAAAATzs/O3amW2MnLNE/s100/colibr%2525C3%2525AC.gif" /></a></div> <script language="javascript">
function lampeggiamento(){
if(document.getElementById('blink2').style.visibility=="hidden")
{document.getElementById('blink2').style.visibility= "visible"}
else
{document.getElementById('blink2').style.visibility= "hidden"}
}
setInterval('lampeggiamento()',1000);
</script>

che può anche essere utilizzato insieme al precedente, perché usa un diverso id blink2. L'intervallo del lampeggiamento è stato impostato in 1000 millisecondi ovvero un secondo.