Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Magazine di tecnologie
Magazine di viaggio e turismo
Magazine di musica e spettacoli
Negozio di Informatica
Basilicata turismo
Food e territori
Agenzia di comunicazione turistica e Digital PR

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
 

Testo che zoomma e scompare

Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript

COMPATIBILITÀ: MsIe, Netscape
FILES ESTERNI: Nessuno
Visualizza la demo
Scarica la demo

Uno dei molteplici problemi che devono affrontare i Web masters, è riuscire a stupire i propri visitatori non appena arivati nel loro sito.
Dynamic Html è maestro in questo, e ci viene in aiuto grazie a effetti di grande impatto visivo. La demo che 'svestiremo' questa settimana, riguarda proprio uno straordinario effetto su testo: esso consiste nel far ingrandire più scritte sino a farle sparire.
Ma capiamo come fare, questo è il Javascript conetenuto nel tag <head>:

<script language="JavaScript1.2">
/********************************************************************************
This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! (I always appriciate links to my page) ********************************************************************************/

/*Se vuoi che l'effetto sia in una posizione diversa, cambia il tag del layer che contiene la zoommata (tale tag, è contenuto nel body, dove c'è la riga:
<div id="divZoom" align="center" style="position:absolute; top:170"></div>).

Le variabili da modificare:
Per primo il testo: (esso cambierà o sparira con l'ultima parola)*/
 text=new Array('Qui','inserisci','il','testo')

// i colori usati:
// (il primo colore sarà quello usato per lo zoom, gli altri per l'effetto sull'ultima parola.)
 color=new Array('#202020','#424242','#8E8E8E','#C2C2C2','#E8E8E8')

// quanti colori:
 var numColors=5

// la grandezza con la quale lo zoom deve finire:
 var endSize=70
// velocià dello zoom (in millisecondi)
 var Zspeed=30

// la velocità con cui i colori devono cambiare
 var Cspeed=200

// i caratteri
 var font='Arial Black,Arial,Helvetica'

// il testo deve scomparire una volta finito? Usa True (vero) o false (falso)
 var hide=true

/*Se vuoi che l'animazione non appaia quando viene caricata la pagina, togli la riga che segue questo commento (Se vuoi che l'effetto parta con un click, scrivi una riga come questa: <a href="#" onclick="fadeInit()">Clicca per lo zoom</a>)*/
 onload=zoomInit;


Questa parte di codice è molto importante per permettere la personalizzazione della demo. Quindi, se voleste adattare lo script alle vostre più vicine esigenze, fate riferimento ai commenti in italiano preceduti dai segni //

L'altra porzione di codice contenuta sempre nello stesso script, serve per far partire l'animazione, per far cambiare i colori al testo, per nascondere il layer che contiene la zoommata e per farla ripartire se richiesto.

/*You shouldn't really have to set anything below this point **************************************************************************** **************************************************************************** *****************************************************************************/
var size=10
var gonum=0
/*Browsercheck and settings vars ****************************************************************************/
var ie, n;
if (document.all) {
n=0
ie=1
zoomText='document.all.divZoom.innerText=text[num]'
zoomSize='document.all.divZoom.style.fontSize=size'
closeIt=""
fadeColor="document.all.divZoom.style.color=color[num]"
}
if (document.layers) {
n=1;ie=0
zoomText=""
zoomSize="document.divZoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+size+'px; color:'+color[0]+'\">'+text[num]+'</p>')"
closeIt="document.divZoom.document.close()"
fadeColor="document.divZoom.document.write('<p align=\"center\" style=\"font-family:'+font+'; font-size:'+endSize+'px; color:'+color[num]+'\">'+text[text.length-1]+'</p>')"
}

/*The functions for zooming text.
****************************************************************************/
function zoom(num,fn){
if (size<endSize){
eval(zoomText)
eval(zoomSize)
eval(closeIt)
size+=5;
setTimeout("zoom("+num+",'"+fn+"')",Zspeed)
}else{
eval(fn);
}
}
/*The functions for fading/changing colors on text
****************************************************************************/
function fadeIt(num){
if (num<numColors){
eval(fadeColor)
eval(closeIt)
num+=1;
setTimeout("fadeIt("+num+")",Cspeed)
}else{
hideIt()
}
}
/*This is the function that hides the layer after the zoom/color change
****************************************************************************/
function hideIt(){
if(hide){
if(ie)document.all.divZoom.style.visibility="hidden"
if(n)document.layers.divZoom.visibility="hidden"
}
}
/*This is the functions that calls the right function...or something :}
****************************************************************************/
function zoomInit(){
if(ie){
document.all.divZoom.style.color=color[0]
document.all.divZoom.style.fontFamily=font
}
if(ie || n) go(0)
}
function go(num){
gonum+=1
size=10
if(num<text.length){
zoom(num,'go('+gonum+')')
}else{
fadeIt(0)
}
}


function playAgain(){
size=10
gonum=0
if(ie) document.all.divZoom.style.visibility='visible'
else if(n) document.layers.divZoom.visibility='visible'
zoomInit()
}
//***************************************************************************
</script>

Una volta impostate le variabili, serve richiamare l'animazione nel corpo del documento:

<body bgcolor="White" background="sfondo_demo.gif">
<a href="http://www.ipoint2000.net/galileo"><img src="galileo_piccolo.gif" border=0></a>
<div id="divZoom" align="center" style="position:absolute; top:170"></div>
<p align="right">
<a href="#" onclick="playAgain()">[RIPARTI]</a>
</p>

</div>
</body></html>

Da notare il link [RIPARTI] che, serve per far ripartire l'animazione con un semplice click. Se desiderate, esso può essere rimosso cancellando la riga

<a href="#" onclick="playAgain()">[RIPARTI]</a>

In conlusione, diciamo che se voleste far apparire l'animazione in una posizione diversa, dovete far riferimento alla riga contenuta nel body, codesta riga, è qui sotto riportata:

<div id="divZoom" align="center" style="position:absolute; top:170"></div>
 

 
 
Home > dhtml > teoria > 1999 > maggio > ...   © 1999-2018 Risorse.net, tutti i diritti riservati