Discussion :

[inspecteur_]

Bonjour � tous,

j'essaie d'apprendre seul � cr�er un site internet et ai un probl�me, je voudrai faire en sorte que lorsque la souris passe sur la "case1", l''affiche1" recouvre petit � petit ma "case1" de bas en haut puis s'arr�te en haut de la case mais je n'arrive pas � faire �a. Jusque la tout ce que j'ai r�ussis � faire c'est que si la souris passe sur l'affiche pendant qu'elle monte, elle recommence au d�but tout en continuant de monter (elle se d�double en quelque sorte), je n'arrive pas � faire mieux.

Merci beaucoup � ceux qui pourront m'aider !

[mathieu]

pouvez vous nous faire un exemple de test sur le site suivant par exemple ?
https://codesandbox.io/s/vanilla

[inspecteur_]

Merci Mathieu je connaissais pas ce site il a l'air pratique, voila ce que j'ai r�ussis � faire :

https://codesandbox.io/s/competent-n...=/src/index.js

J'arrive � faire monter mon affiche de bas en haut mais lorsque la souris se place sur la partie bleu (l'affiche), elle se 'multiplie' et je n'arrive pas � �viter �a.
De plus, je ne sais pas comment accorder verticalement mon affiche et ma case (ici j'ai du monter mon affiche de 335px ce qui n'est pas tr�s beau)

Merci de votre r�ponse

[mathieu]

en mettant "position=relative" pour l'�l�ment bleu, j'ai l'impression qu'on s'approche de ce que vous voulez faire :
https://codesandbox.io/s/xenodochial...=/src/index.js

[inspecteur_]

Ah oui merci �a � r�gler le probl�me de la position, mais l'�l�ment bleu continue de se 'd�doubl�', peut �tre que je ne peut pas faire �a juste avec le JavaScript de base et que je dois utiliser une librairie ?

[NoSmoking]

Bonjour et bienvenue sur DVP.

mais l'�l�ment bleu continue de se 'd�doubl�'...

Ce que tu essaies de faire est effectivement tout � fait faisable en CSS et c'est surement m�me pr�f�rable, ceci �tant ton plus gros soucis vient de cette ligne :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

case1.addEventListener("mouseover", fct1);

ton mouseover est d�clench� plus souvent que tu ne le penses, ajoute un console.log("over") en entr�e de ta fonction pour t'en rendre compte.

Pour palier ce soucis et �tre au plus proche du :hover en CSS il te faut utiliser l'�v�nement mouseenter :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

case1.addEventListener("mouseenter", fct1);

Nota :
� Un chose qui serait � faire et de mettre un clearInterval(timer) en entr�e de fonction pour �viter le cumul des timers.
� Il serait �galement bon de regarder du c�t� de requestAnimationFrame pour g�rer ton animation.

[jreaux62]

Bonjour,

j'essaie d'apprendre seul � cr�er un site internet...

Si tu en es au tout d�but de l'apprentissage, il faut commencer par apprendre le HTML et le CSS.

Car ce que tu cherches � obtenir se fait assez facilement en HTML + CSS (sans JS) :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<div class="box garagedoor slide-top">slide top > btm</div>

Code css :

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
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.box { 
  display:inline-block;
  width:250px;
  height:200px;
  text-align:center;
  color:#fff;
}
/* ------------------ */
.garagedoor { 
  position:relative; /* important */
}
.garagedoor:before,
.garagedoor:after { 
  position:absolute; /* important */
  content:'';
  display:block;
  z-index:-1; /* important (derrière le texte) */
}
.garagedoor:before { 
  left:0; right:0; 
  top:0; bottom:0;
  background:green;
}
.garagedoor:after { 
  background:blue;
  -webkit-transition:all 0.5s ease;
  -moz-transition:all 0.5s ease;
  transition:all 0.5s ease;
}
/* ------------------ */
/* slide top > btm */ 
.garagedoor.slide-top:after { 
  left:0; right:0; 
  top:0; bottom:100%;
}
.garagedoor.slide-top:hover:after { 
  top:0; bottom:0;
}

VARIANTES :

• https://codepen.io/jreaux62/pen/XWgwwPv