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 ?

[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

[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.

[inspecteur_]

D'accord merci à vous tous, je vais essayer avec les 2 solutions et continuer à apprendre HTML et CSS.
D'ailleurs est-ce que vous connaissez des cours en ligne complet sur ces sujets ? J'en ai trouver quelques uns mais vaut mieux plus que pas assez