animation sur carte au passage du curseur

philoupe · 27/03/2011, 13h52

Comment dois je coder en javascript pour obtenir l'effet de la carte qui s'élève quand le curseur passe sur la carte à la page suivante : http://oracledebelline.com/OracleLigneJeux.php ???

laurentg2003 · 27/03/2011, 15h29

Bonjour,
Je pense,que c'est un effet mousouver avec differents niveaux de z-index
les cartes sont empilées les une sur les autres avec des z-index croissants et au survol d'une carte une image plus haute est affichée
Aprés ce n'est que mon avis mais je pense qu'une telle solution doit créer le même effet !
Sinon regarde dans le code Js

NoSmoking · 27/03/2011, 16h10

Bonjour,
c'est réalisable en CSS pur avec un décalage du top sur un hover.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<style type="text/css">
.carte {
  width : 50px;
  height : 100px;
  border : 1px solid #808080;
  background-color : #fefee0;
}
.carte:hover {
  margin-top : -10px;
}
</style>
</head>
<body>
<div class="carte"></div>
</body>
</html>

27/03/2011, 13h52	#1
philoupe Invité de passage philippe faure Inscription : mars 2011 Messages : 20 Détails du profil Informations personnelles : Nom : philippe faure Informations forums : Inscription : mars 2011 Messages : 20 Points : 1 Points : 1	animation sur carte au passage du curseur Comment dois je coder en javascript pour obtenir l'effet de la carte qui s'élève quand le curseur passe sur la carte à la page suivante : http://oracledebelline.com/OracleLigneJeux.php ???
	00

27/03/2011, 15h29	#2
laurentg2003 Membre habitué Inscription : janvier 2007 Messages : 225 Détails du profil Informations personnelles : Localisation : France, Gironde (Aquitaine) Informations forums : Inscription : janvier 2007 Messages : 225 Points : 115 Points : 115	Bonjour, Je pense,que c'est un effet mousouver avec differents niveaux de z-index les cartes sont empilées les une sur les autres avec des z-index croissants et au survol d'une carte une image plus haute est affichée Aprés ce n'est que mon avis mais je pense qu'une telle solution doit créer le même effet ! Sinon regarde dans le code Js __________________ "Il n'existe que deux choses infinies, l'univers et la bêtise humaine... mais pour l'univers, je n'ai pas de certitude absolue." (Albert Einstein / 1879-1955)
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email