Transizione dissolvenza tra pagine html

**danirota** · 27-11-2012, 13:11

Ciao a tutti, non so se sono nel forum giusto, forse dovrei essere in javascript, ma non ne sono sicuro.
Quello che dovrei fare è una transizione in dissolvenza (2-3 secondi) tra diverse pagine html
es: pagina 1 2-3 sec. dissolvenza con pagina 2 2-3 sec. dissolvenza con pagina 3 ecc...

Ho provato a cercare in giro ma non ho trovato nulla. Ho paura se serva della programmazione per farlo ed io non sono in grado per ora

Qualcuno può essermi mettermi sulla strada giusta?

**Vincent.Zeno** · 27-11-2012, 13:53

vedi se trovi qualcosa qui: http://www.dynamicdrive.com
o prova a cercare con DHTML

intanto sposto in js

**danirota** · 27-11-2012, 19:32

ho trovato questo codice, ho dovuto modificarlo perchè io devo far scomparire un div e far comparire nello stesso istante un altro, sempre in dissolvenza, però non funziona e non capisco perchè

codice:

<style type="text/css">
/* Style for Fade-In Page script */
#fadeDiv {
display:none;
}
/* End Style for Fade-In Page script */
</style>
<script type="text/javascript">


var ID = "fadeDiv";

fadeInPage.speed=50; //Set speed of transition for non-IE, lower numbers are faster, 20 is the minimum safe value
fadeInPage.bg='#c0c0c0'; //Set backgroud style (color or color and image) of transition division for non-IE, should match page background or the predominant color of the page

	
	if(document.getElementById(ID) && document.getElementById(ID).style){
		fadeInPage.d=document.getElementById(ID), fadeInPage.t=function(o){return typeof fadeInPage.d.style[o]=='string'};
		fadeInPage.prprt=fadeInPage.t('opacity')? 'opacity' : fadeInPage.t('MozOpacity')? 'MozOpacity' : fadeInPage.t('KhtmlOpacity')? 'KhtmlOpacity' : null;
	}
	
	
	fadeInPage.set=function(){
		var prop=fadeInPage.prprt=='opacity'? 'opacity' : fadeInPage(ID).prprt=='MozOpacity'? '-moz-opacity' : '-khtml-opacity';
		document.write('\n<style type="text/css">\n#'+next_div+' {\nheight:'+window.innerHeight+'px;display:block;position:fixed;'+
		'z-index:10000;top:0;left:0;background:'+fadeInPage.bg+';width:100%;\n'+ prop +':1;\n}\n<\/style>\n');
	}
	
	if(window.addEventListener&&fadeInPage.prprt){
		fadeInPage.set();
		window.addEventListener('load', fadeInPage, false);
	}
	


function fadeInPage(ID){
		//alert(ID);
		var el=document.getElementById(ID);
		//alert(el);
		el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] == ''? 1 : el.style[fadeInPage.prprt];
		
		if (el.style[fadeInPage.prprt] > 0){
			el.style[fadeInPage.prprt] = el.style[fadeInPage.prprt] - 0.02;
			setTimeout("fadeInPage("+ID+")", fadeInPage.speed);
		}
		else {
			el.style[fadeInPage.prprt] = 0;
			if(document.removeChild)
				el.parentNode.removeChild(el);
		}
		
		
		
		//alert(next_div);
	}
</script>
</head>
<body>

<div id="fadeDiv" onClick="fade('uno')">fade div</div>

questo dovrebbe far apparire il primo div (fadeDiv) ma non lo fa e non capisco perchè

**cavicchiandrea** · 27-11-2012, 19:42

Prima parli di dissolvenza tra pagine poi dici che sono dei div a rotazione, prova a vedere se questo può fare al caso tuo altrimenti gogola (slideshow jquery o slideshow javascript).

P.S. Le dissolvenze o transizioni fade non sono facilissime da gestire e un minimo di conoscenza di js è consigliata

**danirota** · 29-11-2012, 18:21

Alla fine ho risolto con questo codice
1 pagina html, 4 div con il contenuto che deve sfumare, posizionati con positoin absolute in modo che stiano uno sopra l'altro

ecco il codice

codice:

<style type="text/css">

#div_1{position:absolute; top:150px; z-index:100; width:100%;}
#div_2{position:absolute; top:150px; z-index:90; width:100%;}
#div_3{position:absolute; top:150px; z-index:80; width:100%;}
#div_4{position:absolute; top:150px; z-index:70; width:100%;}
#div_11{position:absolute; top:150px;z-index:10; width:100%;}



</style>

<script type="text/javascript">


function funzioni(){
	
	document.getElementById('div_1').style.background = "url(./img/bkg_impianti.jpg) top center repeat-x";
	document.getElementById('link_home').innerHTML = "<a href=\"impianti_civili.php\" title=\"Impianti elettrici civili ed industriali\"><img src=\"img/piu.png\" alt=\"Impianti elettrici civili ed industriali\" name=\"piu\" width=\"48\" height=\"46\" border=\"0\" /></a>";
	
	var i;
	
	dissolvenza();
	
	for(i = 1; i < 99;i++){
		
		setTimeout("opacita()", (i*18000));
		setTimeout("dissolvenza()", (i*18000));
	}
}

function dissolvenza(){
	
	setTimeout("fade(document.getElementById('div_1'), 1, 0, 1000, 1)", 4000);	
	setTimeout("fade(document.getElementById('div_2'), 1, 0, 1000, 2)", 8000);
	setTimeout("fade(document.getElementById('div_3'), 1, 0, 1000, 3)", 12000);
	setTimeout("fade(document.getElementById('div_4'), 1, 0, 1000, 4)", 16000);
}

function opacita(){
	
		document.getElementById('div_1').style.opacity = '1';
		document.getElementById('div_2').style.opacity = '1';
		document.getElementById('div_3').style.opacity = '1';
		document.getElementById('div_4').style.opacity = '1';
		
}



    function fade(element, o0, o1, t, id) {
        // IE compatibility. Detect lack of native 'opacity' support, and ensure element
        // has layout for IE6-7.
        //
		
		switch(id){
			//inizia a scomparire il 1 -> metti bkg a 2
			case 1: document.getElementById('div_2').style.background = "url(./img/bkg_sicurezza.jpg) top center repeat-x";
					document.getElementById('link_home').innerHTML = "<a href=\"impianti_sicurezza.php\" title=\"Impianti di sicurezza e trsamissione dati\"><img src=\"img/piu.png\" alt=\"Impianti di sicurezza e trasmissione dati\" name=\"piu\" width=\"48\" height=\"46\" border=\"0\" /></a>";
					break;
			case 2: document.getElementById('div_3').style.background = "url(./img/bkg_automazione.jpg) top center repeat-x";
					document.getElementById('link_home').innerHTML = "<a href=\"automazione.php\" title=\"Automazione e domotica\"><img src=\"img/piu.png\" alt=\"Automazione e domotica\" name=\"piu\" width=\"48\" height=\"46\" border=\"0\" /></a>";
					break;
			case 3: document.getElementById('div_4').style.background = "url(./img/bkg_pannelli.jpg) top center repeat-x";
					document.getElementById('link_home').innerHTML = "<a href=\"fotovoltaici.php\" title=\"Pannelli fotovoltaici\"><img src=\"img/piu.png\" alt=\"Pannelli fotovoltaici\" name=\"piu\" width=\"48\" height=\"46\" border=\"0\" /></a>";
					break;	
			case 4: document.getElementById('div_11').style.background = "url(./img/bkg_impianti.jpg) top center repeat-x";
					document.getElementById('link_home').innerHTML = "<a href=\"impianti_civili.php\" title=\"Impianti elettrici civili ed industriali\"><img src=\"img/piu.png\" alt=\"Impianti elettrici civili ed industriali\" name=\"piu\" width=\"48\" height=\"46\" border=\"0\" /></a>";
					break;	
		
		}
		
        var canopaque= 'opacity' in element.style;
        if (!canopaque && 'currentStyle' in element && element.currentStyle.hasLayout===false)
            element.style.zoom= '1';

        function setOpacity(o) {
            if (canopaque)
                element.style.opacity= ''+o;
            else
                element.style.filter= 'alpha(opacity='+Math.round(o*100)+')';
        }

        var t0= new Date().getTime();
        setOpacity(o0);
        var interval= setInterval(function() {
            var dt= (new Date().getTime()-t0)/t;
            if (dt>=1) {
                dt= 1;
                clearInterval(interval);
            }
            setOpacity(o1*dt+o0*(1-dt));
        }, 25);
    
		
		
		
	}
	

</script>

Discussione: Transizione dissolvenza tra pagine html

Strumenti discussione

Ricerca discussione

Visualizza

Transizione dissolvenza tra pagine html

Permessi di invio