Menu flottant

Télécharger le projet
Commenter

Description

MENU FLOTTANT

Il s'agit d'un menu horizontal qui suit les impulsions de la souris et possédant une inertie.

Il m' a été inspiré par Wolfood qui possédait un menu de ce type sur son site. Celui-ci est une version très simple, mais qui montre bien comment donner un effet d'inertie avec un code on ne peut plus élémentaire.

J'accompagne les sources d'un fichier PDF qui vous donne tout le pas à pas pour reconstruire intégralement l'exemple.

Source / Exemple : 


Substance essentielle du code pour l'inertie:

//L’occurrence de la barre se nomme b,
//L’occurrence du curseur se nomme c.

var position;

setInterval(regle, 100);

function regle(){
	//_xmouse renvoie la position horizontale de la souris.
	//En fonction, on bouge le curseur et la barre à l'opposé.
	if(_xmouse < 150 && _xmouse > -180){
	position = _xmouse;
	setProperty(c,_x,position);
	//La position étant réactualisée tous les 1/10, l'écart décroit.
	//Comme on le multiplie par un nombre inférieur à 1, il tend vers 0 petit à petit.
	setProperty(b,_x,(getProperty(b,_x)-position)*0.5);
	}
}
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 (cs_yous)