Problème avec javascript (scroll function)
RésoluJefe_Pablo Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
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')
}
});
- Problème avec javascript (scroll function)
- Scroll lock - Forum Windows
- A javascript error occurred in the main process - Forum Matériel & Système
- Touche scroll lock ✓ - Forum Excel
- Telecharger javascript - Télécharger - Langages
- Touche "scroll lock" - Forum Windows
3 réponses
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...
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 {
}
});