18041 sujets

Questions générales et questions de débutants

Parallaxe et scroll infini

Bonsoir à toutes et tous,
je poste ce petit message car je ne trouve pas la solution à mon soucis,
je suis en train d'intégrer un site avec un effet de parallaxe sur les côtés.
j'ai mis mes images dans des <aside> pour pouvoir les positionner et fait mon script sur un document à part.
l'effet parallaxe se fait bien à une exception près, la page scroll à l'infini même après le footer.
Je cherche donc une solution pour arrêter le scroll une fois arriver au footer
mon code :

HTML :
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Parallax oktoplus</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js" defer></script>
</head>
  <body>
    <header>
      <a href="#" class="logo"> <img src="Poulpy Seul.png" alt=""></a>
      <ul>
        <li><a href="#" class="active">Accueil</a></li>
        <li><a href="#">Réalisation</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </header>
    <section>
    <aside id="para-left">
      <img src="gd-bulles.png" id="gdBullesL">
      <img src="moy-bulles.png" id="moyBullesL">
      <img src="pt-bulles.png" id="ptBullesL">
    </aside>
    <aside id="para-right">
      <img src="gd-bulles.png" id="gdBullesR">
      <img src="moy-bulles.png" id="moyBullesR">
      <img src="pt-bulles.png" id="ptBullesR">
    </aside>
    <div class="article">
     texte
    </div>
    
    </section>

  <footer>
<a href="#" class="logo"> <img src="Poulpy Seul.png" alt=""></a>
    <ul>
      <li><a href="#" class="active">Accueil</a></li>
      <li><a href="#">Réalisation</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </footer>
[/spoiler]

CSS:
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
header, footer{
  width: 100%;
  height: 195px;
  background: #4985DC;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10000;
}
footer{
  position: relative;
  bottom: 0;
}
header img{
  height: 50%;
}
header ul, footer ul{
  display: flex;
  justify-content: center;
  align-items: center;
}
header ul li, footer ul li{
  list-style: none;
  margin-left: 20px;
}
header ul li a, footer ul li a{
  text-decoration: none;
  padding: 6px 15px;
  color: #fff;
  border-radius: 20px;
}
header ul li a:hover, header ul li a.active{
  background: #fff;
  color: #4985DC;
}
.article{
  width: 50%;
  margin: auto;
  margin-top: 25px;
  position: relative;
}
aside{
  position: relative;
  width: 25%;
  height: 100vh;
}
#para-left img{
  position:absolute;
  top: 0;
  left: 0;
}
#para-right{
  right: 0;
  position: absolute;
  z-index: 10;
}
 #para-left{
   left: 0;
   position: absolute;
   z-index: 10;
 }
#para-right img{
  position:absolute;
  transform: scaleX(-1);
  top: 0;
  right: 0;
}


JS:
let gdBullesL = document.getElementById('gdBullesL');
let moyBullesL = document.getElementById('moyBullesL');
let ptBullesL = document.getElementById('ptBullesL');
let gdBullesR = document.getElementById('gdBullesR');
let moyBullesR = document.getElementById('moyBullesR');
let ptBullesR = document.getElementById('ptBullesR');

window.addEventListener('scroll', function() {
  let value = window.scrollY;
  gdBullesL.style.top = value * 0.5 + 'px';
  moyBullesL.style.top = value * 0.9 + 'px';
  ptBullesL.style.top = value * 0.7 + 'px';

  gdBullesR.style.top = value * 0.5 + 'px';
  moyBullesR.style.top = value * 0.9 + 'px';
  ptBullesR.style.top = value * 0.70 + 'px';
})



d'avance merci pour votre aide
Modifié par Remi_H (19 Nov 2021 - 23:11)
Modérateur
Bonjour,

La page ne scrolle pas à l'infini mais seulement de la hauteur des balises <aside> qui est à 100vh (en tout cas, c'est ce que j'ai chez moi avec Chrome et le code que tu as donné). Tu rajoutes par exemple une couleur de background à ces balises et tu verras que ça scrolle jusqu'à à atteindre le bas de ces balises.

Comme on n'a qu'assez peu d'information concernant le design global de la page, et aucune idée de tes contraintes, c'est difficile de donner une solution. Mais a priori, modifier la hauteur des balises <aside> de manière appropriée devrait suffire à régler ton problème.

Amicalement,
Sujet clos
Aller à