DEVHIDE
Login Or Sign up

I'm getting a problem with the parallax effect of my website

53 Views Asked by At

I'm building a simple website using just HTML/CSS/JS, and I need to implement a parallax effect on it, which I've also done. But, the parallax effect is not going as I had expected, and when I scroll up, all the elements in the different parallax layers move up, leaving a gap below. I want the scroll to stop when I reach the end of the building-main layer. Please find my code below.

Here's my code:

document.addEventListener("DOMContentLoaded", function () {
  // Select specific elements with class "parallax-layer"
  const cloudLayer = document.querySelector(".cloud");
  const silhouetteLayer = document.querySelector(".silhouette");
  const buildingOneLayer = document.querySelector(".building-one");
  const buildingTwoLayer = document.querySelector(".building-two");
  const buildingThreeLayer = document.querySelector(".building-three");
  const buildingMainLayer = document.querySelector(".building-main");

  // Set different speed ratios for the layers
  const cloudSpeed = 0.1;
  const silhouetteSpeed = 0.3;
  const buildingOneSpeed = 0.5;
  const buildingTwoSpeed = 0.7;
  const buildingThreeSpeed = 0.9;
  const buildingMainSpeed = 1.1;

  // Function to update the position of parallax layers
  function updateParallaxLayers() {
    // Get the overall scroll position
    const scrollPosition = window.scrollY;

    // Calculate the translation for the cloud layer based on its speed
    const cloudYPos = -(scrollPosition * cloudSpeed);
    cloudLayer.style.transform = `translateY(${cloudYPos}px)`;

    // Calculate the translation for the silhouette layer based on its speed
    const silhouetteYPos = -(scrollPosition * silhouetteSpeed);
    silhouetteLayer.style.transform = `translateY(${silhouetteYPos}px)`;

    // Calculate the translation for the building-one layer based on its speed
    const buildingOneYPos = -(scrollPosition * buildingOneSpeed);
    buildingOneLayer.style.transform = `translateY(${buildingOneYPos}px)`;

    // Calculate the translation for the building-two layer based on its speed
    const buildingTwoYPos = -(scrollPosition * buildingTwoSpeed);
    buildingTwoLayer.style.transform = `translateY(${buildingTwoYPos}px)`;

    // Calculate the translation for the building-three layer based on its speed
    const buildingThreeYPos = -(scrollPosition * buildingThreeSpeed);
    buildingThreeLayer.style.transform = `translateY(${buildingThreeYPos}px)`;

    // Calculate the translation for the building-main layer based on its speed
    const buildingMainYPos = -(scrollPosition * buildingMainSpeed);
    buildingMainLayer.style.transform = `translateY(${buildingMainYPos}px)`;
  }

  // Listen for the scroll event and update parallax layers on scroll
  window.addEventListener("scroll", updateParallaxLayers);

  // Initial update to set the initial positions
  updateParallaxLayers();
});
* {
  margin: 0px;
  padding: 0px;
}

.main-container {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
}

.backdrop {
  display: flex;
  position: absolute;
  background-image: url("./pics/sky.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.cloud {
  display: flex;
  position: absolute;
  background-image: url("./pics/cloud.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.silhouette {
  display: flex;
  position: absolute;
  background-image: url("./pics/silhouette.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-one {
  display: flex;
  position: absolute;
  background-image: url("./pics/building-one.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-two {
  display: flex;
  position: absolute;
  background-image: url("./pics/building-two.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-three {
  display: flex;
  position: absolute;
  background-image: url("./pics/building-three.png");
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

.building-main {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

.building-main-img {
  width: 100%;
  height: 100%;
}

.roof {
  display: flex;
  position: absolute;
  top: 10%;
  left: 21%;
}

.roof-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.illustration {
  display: flex;
  position: absolute;
  top: 23.5%;
  left: 15%;
}

.illustration-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.animation {
  display: flex;
  position: absolute;
  top: 32.7%;
  left: 20%;
}

.animation-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.content {
  display: flex;
  position: absolute;
  top: 46.5%;
  left: 14.5%;
}

.content-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.testimonial {
  display: flex;
  position: absolute;
  top: 72%;
  left: 25%;
}

.testimonial-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.spray-painter {
  display: flex;
  position: absolute;
  top: 83%;
  left: 6%;
}

.spray-painter-img {
  max-width: 80%;
  max-height: 80%;
  width: auto;
  height: auto;
}

.disc-jockey {
  display: flex;
  position: absolute;
  top: 89.25%;
  left: 73.25%;
}

.disc-jockey-img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
}

/* Media Queries */

/* Extra Small Devices, Phones (up to 576px) */
@media only screen and (max-width: 576px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23.5%;
    left: 15%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 85%;
    left: 9%;
  }

  .spray-painter-img {
    max-width: 20%;
    max-height: 20%;
    width: auto;
    height: auto;
  }
}

/* Small Devices, Tablets (576px - 768px) */
@media only screen and (min-width: 577px) and (max-width: 768px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23%;
    left: 11%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 84.5%;
    left: 8%;
  }

  .spray-painter-img {
    max-width: 30%;
    max-height: 30%;
    width: auto;
    height: auto;
  }
}

/* Medium Devices, Desktops (768px - 992px) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23%;
    left: 11%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 84.5%;
    left: 8%;
  }

  .spray-painter-img {
    max-width: 45%;
    max-height: 45%;
    width: auto;
    height: auto;
  }
}

/* Large Devices, Desktops (992px - 1200px) */
@media only screen and (min-width: 993px) and (max-width: 1200px) {
  .roof {
    display: flex;
    position: absolute;
    top: 8.5%;
    left: 18%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23%;
    left: 11%;
  }

  .illustration-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46%;
    left: 12%;
  }

  .content-img {
    max-width: 70%;
    max-height: 70%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 65%;
    max-height: 65%;
    width: auto;
    height: auto;
  }

  .spray-painter {
    display: flex;
    position: absolute;
    top: 84.5%;
    left: 8%;
  }

  .spray-painter-img {
    max-width: 45%;
    max-height: 45%;
    width: auto;
    height: auto;
  }
}

/* Extra Large Devices, Large Desktops (1200px and above) */
@media only screen and (min-width: 1201px) {
  .roof {
    display: flex;
    position: absolute;
    top: 10%;
    left: 21%;
  }

  .illustration {
    display: flex;
    position: absolute;
    top: 23.5%;
    left: 15%;
  }

  .illustration-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .animation {
    display: flex;
    position: absolute;
    top: 32.7%;
    left: 20%;
  }

  .animation-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .content {
    display: flex;
    position: absolute;
    top: 46.5%;
    left: 14.5%;
  }

  .content-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .webdev {
    display: flex;
    position: absolute;
    top: 58.25%;
    left: 26.5%;
  }

  .webdev-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }

  .testimonial {
    display: flex;
    position: absolute;
    top: 72%;
    left: 25%;
  }

  .testimonial-img {
    max-width: 80%;
    max-height: 80%;
    width: auto;
    height: auto;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Aristocat Studio</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="main-container">
      <div class="backdrop"></div>
      <div class="cloud"></div>
      <div class="silhouette"></div>
      <div class="building-one"></div>
      <div class="building-two"></div>
      <div class="building-three"></div>
      <div class="building-main">
        <img
          src="./pics/building-main.png"
          alt="building-main"
          class="building-main-img"
        />
        <div class="roof">
          <img src="./pics/roof.png" alt="roof" class="roof-img" />
        </div>

        <div class="illustration">
          <img
            src="./pics/illustration.png"
            alt="illustration"
            class="illustration-img"
          />
        </div>

        <div class="animation">
          <img
            src="./pics/animation.png"
            alt="animation"
            class="animation-img"
          />
        </div>

        <div class="content">
          <img src="./pics/content.png" alt="content" class="content-img" />
        </div>

        <div class="webdev">
          <img src="./pics/webdev.png" alt="webdev" class="webdev-img" />
        </div>

        <div class="testimonial">
          <img
            src="./pics/testimonial.png"
            alt="testimonial"
            class="testimonial-img"
          />
        </div>

        <!-- <div class="spray-painter">
          <img
            src="./pics/spray-painter.png"
            alt="spray-painter"
            class="spray-painter-img"
          />
        </div>

        <div class="disc-jockey">
          <img
            src="./pics/disc-jockey.png"
            alt="disc-jockey"
            class="disc-jockey-img"
          />
        </div> -->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

I've tried adjusting the speeds but nothing seems to be working. Please help. Thanks in advance.

javascript parallax
Original Q&A
0

There are 0 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PARALLAX

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.