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')
}
});

A voir également:

Problème avec javascript (scroll function)
Telecharger javascript - Télécharger - Langages
Scroll lock ✓ - Forum MacOS
Javascript round ✓ - Forum Javascript
A javascript error occurred in the main process - Forum Matériel & Système
Node.js javascript runtime virus ✓ - Forum Virus

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38155 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 652
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...

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 {

}
});

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

Problème avec javascript (scroll function)

3 réponses

Votre réponse

Discussions similaires

Newsletters