Testo che zoomma e scompare
Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net
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>
© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net
/dhtml/teoria/1999/maggio/4.asp?print=ok