Preferisco i siti semplici, percui, pur essendo un pò offtopic, riporto qua qualche design che segue questa filosofia.
Giusto un assaggio preso da 25 beautiful, minimalistic, website design
Piccolo è bello.
Categoria: html
Ho pubblicato un esempio pratico del suo utilizzo in precedenza. Mi sono dimenticato di specificare che perche funzioni il filtro opacity in internet explorer è necessario che il layer abbia settatto esplicitamente l’altezza e la larghezza. Negli altri browser invece questo funziona indipendentemente dal settaggio di altezza e larghezza.
La trasparenza puo essere settata direttamente anche attraverso un foglio di stile, senza disturbare javascript, in questo modo :
.opaco {
opacity: .4;
filter: alpha(opacity=40);
}
In questo esempio la trasparenza sarà al 40%, ed ovviamente stabile.
I linguaggi server-side come php o asp permettono di settare gli header e disabilitare la cache locale del browser, ma a volte puo essere servire disabilitarla da pagine html classiche.
Ecco cosa inserire nell’header :
<META HTTP-EQUIV=”Pragma” CONTENT=”no-cache”>
<META HTTP-EQUIV=”Expires” CONTENT=”-1″>
In realta basterebbe il primo, ma su alcuni browers serve anche il secondo che con un work-around ottiene lo stesso risultato ( setta la scadenza della cache sulla pagine a 1 secondo prima dell’istante in cui viene scaricata )
Attraverso questa direttiva
<meta equiv=”Page-Enter” content=”RevealTrans(Duration=Y,Transition=X)”>
E’ possibile definire un effetto di transizione tra le pagine tipo quelli delle presentazioni.
Sostituire a Y il numero di secondi di durata e a X il numero dell’effetto.
Due effetti gradevoli sono il 5 e il 12 ma ce ne sono molti altri.
Da sottolineare che Firefox non sembra supportare questa funzione, ma non causa errori, semplicemente la ignora.
Effetto carino da usare sul web.
Problema : Flash è uno sperco per una cosa cosi semplice, le gif animate pesano troppo.
Soluzione: Javascript e CSS !
Funzione de inizializzazione :
function initImage() {
// start
imageId = ‘uno’;
var uno = document.getElementById(imageId);
imageId = ‘due’;
var due = document.getElementById(imageId);
imageId = ‘tre’;
var tre = document.getElementById(imageId);
imageId = ‘quattro’;
var quattro = document.getElementById(imageId);
setOpacity(uno, 100);
setOpacity(due, 100);
setOpacity(tre, 100);
setOpacity(quattro, 100);
loop();
}
Prendiamo ad esempio 4 immagini con ID uno, due, tre e quattro. La prima, l’immagine di partenza avrà opacità 100, le altre 0.
L’opacità la andiamo a settare con questa funzione, che con particolari accorgimenti funziona sul 99.9% dei browser
function setOpacity(obj, opacity) {
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = “alpha(opacity:”+opacity+”)”;
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
La funzione Loop poi si preoccupa di far partire gli effetti di Fade-in e Fade-out in precisi momenti grazie alla funzionalità setTimeout.
function loop() {
fadeOut(‘uno’,100);
fadeIn(‘due’,0);
window.setTimeout(“fadeOut(‘due’,100)”, 2000);
window.setTimeout(“fadeIn(‘tre’,0)”, 2000);
window.setTimeout(“fadeOut(‘tre’,100)”, 4000);
window.setTimeout(“fadeIn(‘quattro’,0)”, 4000);
window.setTimeout(“fadeOut(‘quattro’,100)”, 6000);
window.setTimeout(“fadeIn(‘uno’,0)”, 6000);
window.setTimeout(“loop()”, 8000);
}
Il primo parametro è la funzione da richiamare, il secondo è il ritardo con cui farlo. Espresso in millisecondi.
Ed ecco le funzioni di fade in e fade out, molto simili tra loro. Utilizzano anch’esse il setTimeout
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity <= 100) {
setOpacity(obj, opacity);
opacity += 5;
window.setTimeout(“fadeIn(‘”+objId+”‘,”+opacity+”)”, 100);
} else {
return 0;
}
}
}
function fadeOut(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity >= 0) {
setOpacity(obj, opacity);
opacity -= 5;
window.setTimeout(“fadeOut(‘”+objId+”‘,”+opacity+”)”, 100);
} else {
return 0;
}
}
}
Mentre per quanto riguarda l’HTML la struttura deve essere questa:
Nel body ci va :
<body bgcolor=”#ffffff” onLoad=”initImage()”>
e nel testo si mette una cosa del genere opportunamente adattata al vostro caso:
<div id=”container” style=”position:relative; left:0px; top:0px; width:395px; height:322px; z-index:1; overflow:hidden; “>
<div id=”Image1″ style=”position:relative; left:0px; top:0px; width:395px; height:322px; z-index:2;”><img id=’uno’ src=”images/HP_img1.gif”></div>
<div id=”Image2″ style=”position:relative; left:0px; top:-322px; width:395px; height:322px; z-index:5; overflow: hidden;”><img id=’due’ src=”images/HP_img2.gif”></div>
<div id=”Image3″ style=”position:relative; left:0px; top:-644px; width:395px; height:322px; z-index:10; overflow: hidden;”><img id=’tre’ src=”images/HP_img3.gif”></div>
<div id=”Image4″ style=”position:relative; left:0px; top:-966px; width:395px; height:322px; z-index:15; overflow: hidden;”><img id=’quattro’ src=”images/HP_img4.gif”></div></td>
</div>
Il container non è opzionale, come anche l’overflow:hidden.
Da notare anche il top progressivamente sempre piu negativo in modo che si sovrappongano.