Pubblicato il 01/03/19 - aggiornato il  | 3 commenti :

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

testo-lampeggiante-css3

e qui c'è la demo



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


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.




3 commenti :

  1. Ciao Ernesto come mai quando pubblico un post,mi viene prima il titolo post(e va bene)poi al posto del nome del blog mi viene il nome di un gioco del quale parlo nel blog?ho modificato prima seguendo untuo articolo per mostrare prima il nome del post poi il nome del blog

    RispondiElimina
    Risposte
    1. Non te lo so dire. Controlla che tu abbia seguito bene queste istruzioni
      https://www.ideepercomputeredinternet.com/2015/10/blogger-titolo-post-nome-blog-modello.html
      @#

      Elimina
    2. proprio questo post ho seguito..se non ho capito male,bisogna aspettare

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy