Sujet Précédent Sujet Suivant

Problème avec javascript (scroll function)

Résolu
Jefe_Pablo Messages postés 3 Date d'inscription vendredi 19 avril 2024 Statut Membre Dernière intervention 20 avril 2024 - 19 avril 2024 à 23:23
Jefe_Pablo Messages postés 3 Date d'inscription vendredi 19 avril 2024 Statut Membre Dernière intervention 20 avril 2024 - 20 avril 2024 à 10:12

Bonjour,
je me permet de vous exposer mon problème si quelqu'un peut m'aider toute aide serait la bienvenue ...
Je suis en train de développer un nouveau site web cela n'est pas l'un de mes premiers seulement j'ai fait commencé à faire mon Javascript et la problème quand j'essaie de faire défiler rien...

J'ai essayé notamment d'utiliser la fonction console.log quand je défile rien dans la console j'ai essayé de tourner la fonction scroll autrement rien...
Windaube et Chrome rien...
Linux Firefox et Chromium rien...

Et je ne vois pas d'ou peut provenir le problème comme je l'ai dit mon code me semble correct.

Pourriez vous m'éclairer s'il vous plait ?

window.onload = function () {
document.querySelector('.container1').classList.add('animate');
 setTimeout(() => {
document.querySelector('#bottommsg').classList.add('animate');
    }, 700);
}


  function callback(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {

 setTimeout(() => {
        entry.target.classList.add('animate'); // Ajoutez une classe CSS pour l'animation
document.querySelector('.container1').style.backdropFilter = "blur(3px)";
    }, 300);

      }
    });
  }

  const observer = new IntersectionObserver(callback);

  const container2 = document.querySelector('.container2');

  observer.observe(container2);

window.addEventListener('scroll', function() {
BottomMsg = document.querySelector('#bottommsg');
if (BottomMsg.classList.contains('animate')) {
BottomMsg.classList.remove('animate');
} else {
BottomMsg.classList.add('animate')
}
});

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38404 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 février 2025 4 732
20 avril 2024 à 01:42

bonjour 

commence par regarder dans la console de ton navigateur si il n'y aurait pas des erreurs...

io serait bien aussi de nous montrer le code html qui va avec.

n'oublie pas non plus de nous indiquer où, dans ton code html, tu as placé ton JavaScript...
0
Réponse 2 / 3
Jefe_Pablo Messages postés 3 Date d'inscription vendredi 19 avril 2024 Statut Membre Dernière intervention 20 avril 2024
20 avril 2024 à 08:51

Bonjour jordane45 comme je te l'ai dit je n'en suis pas a mon premier site ma balise javascript est toujours placée avant la fin de ma balise de fin du body

pas d'erreur

j'ai eu un flash cela est bien dû a ma structure html spéciale (j'ai eu cette idée ce matin en me réveillant et elle a porté ses fruits)

si tu veux un exemple : 
 

<html>
<head>
<link rel="stylesheet" href="./style.css">

<link rel="icon" href="./assets/logos/logo.png">
<title>Ma page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<section id="section1">
<button id="controlbutton">
    <img src="./assets/icons/button1.png" style="
"></button>
<container class="container1">
<img src="./assets/logos/logo-white.png">
</container>
<container class="container2">
<div id=" your name "></div>
<div id="picturescontainer">
<img src="">
<img src="">
</div>
<span id="text1"> phrase 1</span>
<span id="text2"> phrase 2</span>
</container>

</section>
<div id="bottommsg" style="
"><img src="./assets/icons/top.png">
<span>scroll to continue</span>
</div>
<script type="text/javascript" src="./script.js"></script>

</body></html>

problème résolu correction :

 

window.onload = function () {
document.querySelector('.container1').classList.add('animate');
 setTimeout(() => {
document.querySelector('#bottommsg').classList.add('animate');
    }, 700);
}


  function callback(entries, observer) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {

 setTimeout(() => {
        entry.target.classList.add('animate'); // Ajoutez une classe CSS pour l'animation
document.querySelector('.container1').style.backdropFilter = "blur(3px)";
    }, 300);

      }
    });
  }

  const observer = new IntersectionObserver(callback);

  const container2 = document.querySelector('.container2');

  observer.observe(container2);

document.querySelector('section').addEventListener('scroll', function() {
BottomMsg = document.querySelector('#bottommsg');
if (BottomMsg.classList.contains('animate')) {
BottomMsg.classList.remove('animate');
} else {

}
});
0
Réponse 3 / 3
Jefe_Pablo Messages postés 3 Date d'inscription vendredi 19 avril 2024 Statut Membre Dernière intervention 20 avril 2024
20 avril 2024 à 10:12

Merci a toi jordane45 pour ta réactivité
Je mets le sujet en résolu ?
0

Discussions similaires

A quoi sert la touche "scroll lock" ?
LAKESSE -
loutre -

5 réponses
Scroll Lock actif
Sylvie -
captainejojo -

17 réponses
éteindre la touche scroll lock
twal -
depassage -

4 réponses
activer/désactivé touche scroll
GII -
pwei -

9 réponses
scroll lock
cyril -
bagfender -

9 réponses