 |
 Coup de projecteur sur vos pages !! |
|
|
|
Connexion ratee
|
|
Faire découvrir la page petit à petit par le visiteur, noire au
départ, avec un simple cercle visible, le clic de l'utilisateur aggrandit la visibilité jusqu'à ce
que toute la page soit visible. |
|
|
|
|
|
Une image de deux couleurs : fond noir avec un cercle transparent au centre.
Cette image est sur un calque qui suit les mouvement de la souris, tout le contour de l'image est également noir,
ce qui donne l'effet d'un projecteur.
Sur un simple clic, l'image est aggrandie permettant la visualisation de toute la page.
Le cercle transparent de l'image peut bien sûr avoir une autre forme, pour donner un effet 'Batman' par exemple. |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
ns4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;
function makeObj(obj,nest,x,y) {
nest = (!nest) ? '' : 'document.' + nest + '.';
this.css = (ns4) ? eval(nest + 'document.' + obj) : eval('document.all.' + obj + '.style');
this.clipIt = b_clipIt;
this.clip = b_clip;
this.clipTo = b_clipTo;
this.obj = obj + "Object";
eval(this.obj + " = this");
return this;
}
function b_clipTo(t,r,b,l) {
if (ns4) {
this.css.clip.top = t;
this.css.clip.right = r;
this.css.clip.bottom = b;
this.css.clip.left = l;
}
else {
this.css.clip = "rect(" + t + "," + r + "," + b + "," + l + ")";
}
}
function b_clipIt(tstop,rstop,bstop,lstop,step,fn) {
if (!fn) fn = null;
var clipval = new Array();
if (ie4) {
clipval = this.css.clip;
clipval = clipval.slice(5,clipval.length-1);
clipval = clipval.split(' ');
for ( var i = 0; i < 4; i++ ) {
clipval[i] = parseInt(clipval[i]);
}
}
else {
clipval[0] = this.css.clip.top;
clipval[1] = this.css.clip.right;
clipval[2] = this.css.clip.bottom;
clipval[3] = this.css.clip.left;
}
totantstep = Math.max(Math.max(Math.abs((tstop-clipval[0])/step), Math.abs((rstop-clipval[1])/step)), Math.max(Math.abs((bstop-clipval[2])/step), Math.abs((lstop-clipval[3])/step)));
if (!this.clipactive) {
this.clip(clipval[0],clipval[1],clipval[2],clipval[3], (tstop-clipval[0])/totantstep,(rstop-clipval[1])/totantstep, (bstop-clipval[2])/totantstep,(lstop-clipval[3])/totantstep,totantstep,0, fn);
}
}
function b_clip(tcurr,rcurr,bcurr,lcurr,tperstep,rperstep,bperstep, lperstep,totantstep,antstep,fn) {
tcurr = tcurr + tperstep;
rcurr = rcurr + rperstep;
bcurr = bcurr + bperstep;
lcurr = lcurr + lperstep;
this.clipTo(tcurr,rcurr,bcurr,lcurr);
if (antstep < totantstep) {
this.clipactive = true;
antstep++;
setTimeout(this.obj + ".clip(" + tcurr + "," + rcurr + "," + bcurr + "," + lcurr + "," + tperstep + "," + rperstep + "," + bperstep + "," + lperstep + "," + totantstep + "," + antstep + ",'" + fn + "')",50);
}
else {
this.clipactive = false;
eval(fn);
}
}
function spotInit() {
pageWidth = (ns4) ? innerWidth : document.body.offsetWidth;
pageHeight = (ns4) ? innerHeight : document.body.offsetHeight;
oExCont = new makeObj('page');
oExCont.clipTo(0,0,0,0);
if (ie4) {
oExCont.css.width = pageWidth + 10;
oExCont.css.height = pageHeight + 10;
}
oCircle = new makeObj('cercle','page');
oCircle.css.visibility = "visible";
if (ns4) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = moveCircle;
}
function moveCircle(e) {
x = (ns4) ? e.pageX : event.x;
y = (ns4) ? e.pageY : event.y;
oExCont.clipTo(y - 100,x + 100,y + 100,x - 100);
oCircle.css.left = x - 100;
oCircle.css.top = y - 100;
}
function showCont() {
document.onmousemove = null;
oCircle.css.visibility = "hidden";
oExCont.clipIt(-20,pageWidth + 20,pageHeight + 20,-20,20);
}
onload = spotInit;
&:t;/script>
<style>
#cercle { position: absolute; z-index: 500; visibility: hidden; }
#page { background-color: #FFFFFF; position: absolute; top: -1px; left: -1px; visibility: visible; clip: rect(0 auto auto auto); layer-background-color: #FFFFFF; }
</style>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<div id="page">Contenu page !!
<div id="cercle"><a href="#" onclick="showCont(); if(ie4)this.blur()"><img src="images/cercle.gif" border="0"></a></div>
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
