Problème fonction css js sur un bouton
Louis
-
Louis -
Louis -
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:
le css:
et le js:
Pour la vidéo youtube c'est par ici: https://www.youtube.com/watch?v=ueyRcYEmsrI
Merci d'avances pour vos réponses ;)
Louis
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:
- Problème fonction css js sur un bouton
- Fonction si et - Guide
- Comment faire une capture d'écran sur un samsung sans bouton ? - Guide
- Diagnostic bouton photo - Accueil - Outils
- Bouton on/off comment savoir ✓ - Forum Matériel & Système
- Comment débloquer un bouton enfoncé - Forum Samsung
2 réponses
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
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>
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
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
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
par exemple
( 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);
})
});
});