[JAVASCRIPT] Effetto testo lampeggiante con due colori diversi ~ Portale tecnologico - Sito web

venerdì 27 giugno 2014

[JAVASCRIPT] Effetto testo lampeggiante con due colori diversi

giugno 27, 2014 portaletecnologico

Script effetto testo lampeggiante con due diversi colori

PORTALE TECNOLOGICO

Per modificare i due colori e il testo visualizzato, bisogna modificare la parte in rosso delle ultime due riga del codice.

<body onload="blinker('ff0000', 'ffff00', 100)">

<p> <span class="blink">PORTALE TECNOLOGICO</span> </p>

Ecco il codice per intero:

Clicca qui per selezionare il codice

<script type="text/javascript">
 function blinker(farbe1, farbe2, tempo) {
  faktor = 0;
  heller = 1;
  rot1 = farbe1.substr(0, 2);
  gruen1 = farbe1.substr(2, 2);
  blau1 = farbe1.substr(4, 2);
  rot1 = parseInt(rot1, 16);
  gruen1 = parseInt(gruen1, 16);
  blau1 = parseInt(blau1, 16);
  rot2 = farbe2.substr(0, 2);
  gruen2 = farbe2.substr(2, 2);
  blau2 = farbe2.substr(4, 2);
  rot2 = parseInt(rot2, 16);
  gruen2 = parseInt(gruen2, 16);
  blau2 = parseInt(blau2, 16);
  rot_diff = rot2 - rot1;
  gruen_diff = gruen2 - gruen1;
  blau_diff = blau2 - blau1;
  tempo_verlauf = tempo;
  blinker_verlauf();
 }
function blinker_verlauf() {
  rot_neu = rot1 + rot_diff / 100 * faktor;
  gruen_neu = gruen1 + gruen_diff / 100 * faktor;
  blau_neu = blau1 + blau_diff / 100 * faktor;
  rot_neu = Math.floor(rot_neu);
  gruen_neu = Math.floor(gruen_neu);
  blau_neu = Math.floor(blau_neu);
  if(heller == 0) {
   faktor += 10;
  } else {
   faktor -= 10;
  }
  if(faktor >= 100) {
   heller = 1;
  }
  if(faktor <= 0) {
   heller = 0;
  }
  for(i=0; i<document.getElementsByTagName("span").length; i++) {
   if(document.getElementsByTagName("span")[i].className == "blink") document.getElementsByTagName("span")[i].style.color = "rgb(" + rot_neu + ", " + gruen_neu + ", " + blau_neu + ")";
  }
  window.setTimeout("blinker_verlauf()", tempo_verlauf);
 }
</script>

<body onload="blinker('ff0000', 'ffff00', 100)">
<p>
 <span class="blink">UNDERCAOS</span> </p>

0 commenti:

Posta un commento

Iscriviti a: Commenti sul post (Atom)