De l'ombre

Télécharger le projet
Commenter

Description

le script met une ombre sous forme de class que se deplace selon la position du curseur de la souris

il est compatible ff, chrome safari et opera mais pour ce dernier j'ai eu un petit soucis afin d'y remedier j'ai du rajouter un effet d'ombre dans le css d'une valeur de 1000px c'est peut etre un bug de opera pour finir uncompatible avec ie il faudra attendre ie 9

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="ombre.css"/>

<script type="text/javascript" language="JavaScript">

function ombra(elem,txdi){

	this.ec=document.getElementById(elem);
	this.cib=txdi
	var that=this
	document.documentElement.addEventListener("mousemove",function(event){that.ombre(event)},false);
}

ombra.prototype.ombre = function(s){

	var dde=(navigator.vendor) ? document.body : document.documentElement;
	var setX =s.clientX + dde.scrollLeft;
	var setY =s.clientY + dde.scrollTop;

	var oml=(this.ec.offsetLeft+(parseInt(this.ec.offsetWidth)/2))-setX
	var omt=(this.ec.offsetTop+(parseInt(this.ec.offsetHeight)/2))-setY

	if(this.cib=='bloc'){

		this.ec.style.WebkitBoxShadow=(oml/4+'px '+omt/4+'px 15px #232711');
		this.ec.style.MozBoxShadow=(oml/4+'px '+omt/4+'px 15px #232711');
		this.ec.style.boxShadow=(oml/4+'px '+omt/4+'px 15px #232711');
	}
	else{
		this.ec.style.textShadow=(oml/4+'px '+omt/4+'px 10px #232711');
	}
}

function init(){

	new ombra('e1','bloc');
	new ombra('e2','bloc');
	new ombra('e3','bloc');
	new ombra('e4','bloc');
	new ombra('e5','texte');
}

window.addEventListener("load",init,false);

</script>
</head>
<body>
<br><br><br><br>
<div id='e1'></div>
<div id='e2'></div>
<div id='e3'></div>
<div id='e4'></div>
<span id='e5'>ombrage</span>

</body>
</html>

Conclusion :


en été ca peut être utile
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)