Sujet Précédent Sujet Suivant

Problème fonction css js sur un bouton

Fermé
Louis - 5 mai 2020 à 13:49
 Louis - 5 mai 2020 à 17:52
Bonjour,
je viens vers vous car je suis encore débutant sur html, css, et js et je rencontre un problème dans mon code. Le but de cette page est de faire une animation "ripples" quand je clique sur le bouton, j'ai recopié le code à partie d'une vidéo youtube (car il ne mettaient pas le code en description) et je pense que c'est de là que vient le problème...
Pouvez vous m'aider à trouver mon erreur? J'ai fait des recherches google et relu de nombreuses fois mon code mais je ne trouve toujours pas...

je vous met ici l'html: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ripple effect</title>
    <link rel="stylesheet" href="style.css">
    <script src="ripples.js"></script>
</head>
<body>
<a href="#">Button</a>
<a href="#">Button</a>
</body>
</html>


le css: 

@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,90&display=swap');
*
{
 margin: 0;
 padding: 0;
 font-family: 'Poppins', sans-serif;
}
body
{
 display: flex;
 justify-content: center;
 min-height: 100vh;
 flex-direction: column;
 background: #040d15;
}
a
{
 position: relative;
 display: inline-block;
 padding: 12px 36px;
 margin: 10px 0px;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 18px;
 letter-spacing: 2px;
 border-radius: 40px;
 overflow: hidden;
 background: linear-gradient(90deg,#0162c8,#55e7fc);
}
a:nth-child(2)
{
 background: linear-gradient(90deg,#755bea,#ff72c0);
}
span
{
 position: absolute;
 background: #fff;
 transform: translate(-50%,-50%);
 pointer-events: none;
 border-radius: 50%;
 animation: animate 1s linear infinite;
}
@keyframes animate
{
 0%
  {
   width: 0px;
   height: 0px;
   opacity: 0.5;
  }
  100%
  {
   width: 500px;
   height: 500px;
   opacity: 0;
 }
}


et le js: 

const buttons = document.querySelectorAll('a');
 buttons.forEach(btn => {
  btn.addEventListener('click',function(e){

   let x = e.clientX - e.target.offsetLeft;
   let y = e.clientY - e.target.offsetTop;

   let ripples = document.createElement('span')
   ripples.style.left = x + 'px';
   ripples.style.top = y + 'px';
   this.appendChild(ripples);

   setTimeout(() => {
    ripples.remove()
  },1000);
 })
})


Pour la vidéo youtube c'est par ici: https://www.youtube.com/watch?v=ueyRcYEmsrI

Merci d'avances pour vos réponses ;)
Louis
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
5 mai 2020 à 15:25
Bonjour,

Je pense que tu as placé ton JS avant que les boutons n'existent dans ta page.
Il est conseillé de mettre ses fichiers js juste avant le </body>

Tu peux aussi simplement avoir du cache dans ton navigateur... donc vide le avant de réessayer.

Tu peux également essayer avec un autre navigateur (moi j'ai testé avec Firefox).

Et au cas où, tu peux tester en mettant le css et le js dans le même fichier 
<!DOCTYPE html>
<html>
<head>
  <title>TEST</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <style>
  @import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,90&display=swap');
*
{
 margin: 0;
 padding: 0;
 font-family: 'Poppins', sans-serif;
}
body
{
 display: flex;
 justify-content: center;
 min-height: 100vh;
 flex-direction: column;
 background: #040d15;
}
a
{
 position: relative;
 display: inline-block;
 padding: 12px 36px;
 margin: 10px 0px;
 color: #fff;
 text-decoration: none;
 text-transform: uppercase;
 font-size: 18px;
 letter-spacing: 2px;
 border-radius: 40px;
 overflow: hidden;
 background: linear-gradient(90deg,#0162c8,#55e7fc);
}
a:nth-child(2)
{
 background: linear-gradient(90deg,#755bea,#ff72c0);
}
span
{
 position: absolute;
 background: #fff;
 transform: translate(-50%,-50%);
 pointer-events: none;
 border-radius: 50%;
 animation: animate 1s linear infinite;
}
@keyframes animate
{
 0%
  {
   width: 0px;
   height: 0px;
   opacity: 0.5;
  }
  100%
  {
   width: 500px;
   height: 500px;
   opacity: 0;
 }
}
</style>
</head>
<body>
  <a href="#">Button</a>
  <a href="#">Button</a>

  <script type="text/javascript">
   
   const buttons = document.querySelectorAll('a');
   buttons.forEach(btn => {
    btn.addEventListener('click',function(e){

     let x = e.clientX - e.target.offsetLeft;
     let y = e.clientY - e.target.offsetTop;

     let ripples = document.createElement('span')
     ripples.style.left = x + 'px';
     ripples.style.top = y + 'px';
     this.appendChild(ripples);

     setTimeout(() => {
      ripples.remove()
    },1000);
   })
  })
  </script>
</body>
</html>

1
Réponse 2 / 2
Louis
5 mai 2020 à 15:56
Effectivement, ça fonctionne mieux maintenant
Je pensais qu'on pouvait faire comme pour le css avec js c'est à dire l'appeler au début, mais ton code fonctionne bien
Merci beaucoup
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
5 mai 2020 à 17:14
Tu peux placer tes appels JS dans le head... mais ils s'exécutent avant que le <body> soit chargé.
( un navigateur web lit le contenu à afficher de haut en bas... )

Donc, si tu veux quand même placer ton appel JS avant le body... il faut lui dire d'attendre que la page soit totalement chargée.
Pour ça tu peux utiliser 
document.addEventListener("DOMContentLoaded", function(event) {
    // Your code to run since DOM is loaded and ready
});


par exemple 
document.addEventListener("DOMContentLoaded", function(event) {
  const buttons = document.querySelectorAll('a');
   buttons.forEach(btn => {
    btn.addEventListener('click',function(e){

     let x = e.clientX - e.target.offsetLeft;
     let y = e.clientY - e.target.offsetTop;

     let ripples = document.createElement('span')
     ripples.style.left = x + 'px';
     ripples.style.top = y + 'px';
     this.appendChild(ripples);

    setTimeout(() => {
      ripples.remove()
    },1000);
   })
  });
});
0
Louis > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
5 mai 2020 à 17:52
D'accord je vais faire ça
Merciii beaucoup
0

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?
joe! -
fernando-_ytb -

18 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
Bouton ON OFF, O ou I ?
Stargirlfr -
kaparzo23 -

12 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses