Ciao, ho apportato piccole modifiche di carattere esemplificativo, per animare il riquadro ho inserito la classe "cl_animate" al div relativo in modo che al click cambiando la posizione sia eseguita l'animazione.
Per i click ripetuti è stato sufficiente controllare se era in atto una dissolvenza per non eseguire più volte l'azione.
Ho inserito inoltre il display:none quando l'opacità diventava = 0 altrimenti era ancora possibile eseguire il click.
In merito all'oggetto "Dissolve = { ... } " è una struttura javascript che permette di definire proprietà e metodi al suo interno però non permette l'istanziazione multipla.
Avevo erroneamente interpretato la sola necessità di creare delle "dissolvenze". Scusa.
Saluti Tony.
codice:
<!DOCTYPE>
<html>
<head>
<style>
body { background-color:#FFD; overflow:hidden;}
div {
text-align:center;
font:16px Arial;
}
.cl_animate {
transition: all 1.2s linear;
}
</style>
<script>
function f_act_dissolve(){
if(Dissolve.act) return false; // se dissolvenza attiva non considerare i click
Dissolve.Add("id_btn");
Dissolve.Add("id_home");
setTimeout(function(){
var j=document.getElementById("id_home"),
p=j.style.left,
pos=(p=="50%")?"130%":"50%"; // sposta da destra al centro (con animazione) o da centro a destra
j.style.left=pos;
},55); // attendi che l'elemento sia in display:block altrimenti l'animazione potrebbe non essere eseguita.
}
//------------------------------------------------------------------------------
Dissolve={
act:0, // se 0 nessuna dissolvenza in atto
aidn:[], // array di parametri delle dissolvenze
tm:50, // tempo di attesa variazione di opacità (setTimeout)
ostep:0.05, // variazione di opacità di default
Add:function(idn,stp){ // idn è il nome dell'ID dell'elemento da nascondere/far comparire
with(Dissolve){
if(!stp) stp=ostep; // se non indicata usa il valore di default
var d,o,j=document.getElementById(idn); // j contiene è l'elemento su cui modificare l'opacità
o=parseInt(j.style.opacity); // o contiene il valore di opacità iniziale 1.0 oppure 0.0
if(!o) o=0; // se non settata poni a 0
d=(o>0.5)?-1:1; // d determina se incrementare o decrementare l'opacità iniziale
if(d>0) j.style.display="block"; // visualizza elemento in display:none
aidn.push([j,o,d,stp]); // metto nell'array aidn i 4 parametri necessari al ciclo di dissolvenza
if(!act) { act=1; Cycle(); } // se non è attiva alcuna dissolvenza in Cycle() lancio la funzione
}},
Cycle:function(){
with(Dissolve){
var r,n=aidn.length; // n contiene il numero di dissolvenze da processare
if(!n) { act=0; return; } // se non ce ne sono esco da Cycle()
for(r=0;r<n;r++) Dis(r); // per ogni gruppo di parametri che compongono una dissolvenza eseguo uno step di inc/dec dell'opacità
for(r=n-1;r>=0;r--) if(!aidn[r].length) aidn.splice(r,1); // quando termina una dissolvenza l'array dei 4 parametri viene annullato (*) e deve essere tolto da aidn in modo che non venga più eseguito
setTimeout(function(){ Cycle(); },tm); // ripeti Cycle ogni tm millesimi di secondo (fino a quando ci sono elementi in aidn )
}},
Dis:function(r){
with(Dissolve){
var D=aidn[r]; // D è l'array dei 4 parametri di dissolvenza da processare
D[1] += (D[3]*D[2]); // D[1] è l'opacità attuale che deve essere incrementata di D[3] in valore assoluto (D[2] determina la direzione +1 -1)
if(D[1]<0) { // se l'opacità è <0 il decremento è finito
D[1]=0;
D[0].style.display="none"; // non più cliccabile
}
if(D[1]>1) {
D[1]=1; // se >1 l'incremento è finito
}
D[0].style.opacity=D[1]; // imposto l'opacità per l'elemento (D[0])
if(!D[1] || D[1]==1) aidn[r]=[]; // se l'incremento o il decremento è finito annullo i 4 parametri della dissolvenza (*)
}}
}
//------------------------------------------------------------------------------
</script>
</head>
<body>
<!-- div contenitore della Home page -->
<div id='id_home' class='cl_animate' style='position:absolute;left:130%;top:50%;margin:-300px;width:600px;height:600px;background-color:#48E;opacity:0.0;'>
<br><span onclick='f_act_dissolve();' style='cursor:pointer;text-decoration:underline;'>Torna indietro</span>
</div>
<!-- div contenitore pulsante -->
<div id='id_btn' style='position:absolute;left:50%;top:50%;margin:-60px;width:120px;height:120px;background-color:#FF0;opacity:1.0;'>
<br>Test<br>
<br>
<button onclick='f_act_dissolve();' style='cursor:pointer;'>Entra nel sito:</button>
</div>
</body>
</html>
Rispondi quotando
Originariamente inviata da Tonenge
