11540 sujets

JavaScript, DOM et API Web HTML5

Defilement via souris

Bonsoir,
je suis tombé sur la page de chanel et j'ai flashé sur leur présentation. Le coté "je parcours ma page" sans jouer avec le scroll ou autre, je trouve ça nickel

Quelqu'un peut il me conseiller une marche à suivre ? Un script déja fait ?

Si j'ai bien compris ça recupère la position de la souris mais pour le reste c'est plutot flou ...

Merci =)
Modérateur
Bonjour,

Voici un exemple simplifié qui permet de faire bouger un élément HTML avec la souris d'une manière similaire au site de chanel. Je n'ai pas cherché à analyser leur code donc le mien devrait être assez différent (et du coup utilisable sans problème de droits). L'élément a pour id "cible" et j'y ai mis 3 rectangles de couleur. Mais il pourrait contenir ce qu'on veut (y compris donc des images faisant office de liens).

Note : l'exemple marche sur les navigateurs récents. S'il faut le faire marcher sur des navigateurs anciens, il y aura peut-être quelques adaptations à faire, mais a priori rien d'insurmontable.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
#global {position:relative;}
#cible {position:absolute;}
#contenu1 {position:absolute;top:37.5%;left:37.5%;width:25%;height:25%;background:#fcc;}
#contenu2 {position:absolute;top:25%;left:25%;width:25%;height:25%;background:#cfc;}
#contenu3 {position:absolute;top:50%;left:50%;width:25%;height:25%;background:#ccf;}
</style>
</head>
<body>
<div id="global">
<div id="cible">
<div id="contenu1">
<br>
</div>
<div id="contenu2">
<br>
</div>
<div id="contenu3">
<br>
</div>
</div>
</div>
<script>
function getWH()
{
	w=window,
    d=document,
    e=d.documentElement,
    g=d.getElementsByTagName('body')[0],
    x=w.innerWidth || e.clientWidth || g.clientWidth,
    y=w.innerHeight|| e.clientHeight|| g.clientHeight;
    return {w:x,h:y}
}

function getSVal(e,p)
{
	var r=parseFloat(window.getComputedStyle?window.getComputedStyle(e,null)[p]:"");
	return isNaN(r)?0:r;
}

function getMClick(el,ev)
{
	var box=el.getBoundingClientRect();
	return {x:ev.clientX-box.left,y:ev.clientY-box.top};
}

function moveCible2(e,to,lo,t1,l1)
{
	var inc,tk,lk;
	if (to>t1) tk=to-1-Math.abs(t1-to)/5;
	else if (to<t1) tk=to+1+Math.abs(t1-to)/5;
	else tk=to;
	if (lo>l1) lk=lo-1-Math.abs(l1-lo)/5;
	else if (lo<l1) lk=lo+1+Math.abs(l1-lo)/5;
	else lk=lo;
	e.style.top=tk+"px";
	e.style.left=lk+"px";
}

function moveCible(ev)
{
	var e=document.getElementById("cible"),c=getMClick(document.body,ev);
	var to=getSVal(e,"top"),lo=getSVal(e,"left"),t1=-c.y,l1=-c.x,i,j;
	moveCible2(e,to,lo,t1,l1);
	
}
document.body.addEventListener("mousemove",function(ev){moveCible(ev);},false);
document.getElementById("cible").style.height=(2*getWH().h)+"px";
document.getElementById("cible").style.width=(2*getWH().w)+"px";
document.getElementById("cible").style.top=(-getWH().h/2)+"px";
document.getElementById("cible").style.left=(-getWH().w/2)+"px";
</script>
</body>
</html>


Amicalement
Modérateur
Bonjour,

J'ai simplifié le code précédent. Voici la nouvelle version.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body {overflow:hidden;}
#cible {position:absolute;width:200%;height:200%;top:-50%;left:-50%;}
#contenu1 {position:absolute;top:37.5%;left:37.5%;width:25%;height:25%;background:#fcc;}
#contenu2 {position:absolute;top:25%;left:25%;width:25%;height:25%;background:#cfc;}
#contenu3 {position:absolute;top:50%;left:50%;width:25%;height:25%;background:#ccf;}
</style>
</head>
<body>
<div id="cible">
<div id="contenu1"></div>
<div id="contenu2"></div>
<div id="contenu3"></div>
</div>
<script>
function moveCible(ev)
{
	var e=document.getElementById("cible");
	var to=e.offsetTop,lo=e.offsetLeft,tk=to,lk=lo;
	var box=document.body.getBoundingClientRect();
	var t1=box.top-ev.clientY,l1=box.left-ev.clientX;
	if (to>t1) tk=tk-1-Math.abs(t1-to)/5;
	else if (to<t1) tk=tk+1+Math.abs(t1-to)/5;
	if (lo>l1) lk=lk-1-Math.abs(l1-lo)/5;
	else if (lo<l1) lk=lk+1+Math.abs(l1-lo)/5;
	e.style.top=tk+"px";
	e.style.left=lk+"px";	
}

document.body.addEventListener("mousemove",moveCible,false);
</script>
</body>
</html>


Amicalement
Modifié par parsimonhi (04 Jun 2014 - 00:52)
Sujet clos
Aller à