[SOLVED] How to add text over parallex scroll(jquery plugin)

How to add text over parallex scroll(jquery plugin)

I was using the jquery plugin:- https://github.com/pixelcog/parallax.js/, to create a parallax scroll in a website.

I installed parallax using npm and also included:-

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.5.0/parallax.js" integrity="sha512-5Pv5QdhmTB8oLr28Vs22tMM1hrLXkLLfi6GybfOzbe3QV/dnj3+ybvjUx1FfXKJygnXYbN9Oxzmk20AbltrIhA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The snippet is below:-

$('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
  });

@import url("https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700&display=swap");
   


body {
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.parallax-window {
  min-height: 100vh;
  background: transparent;
}


#grand-central {
  margin-bottom: 100px;
}

#grand-central h3 {
  font-size: 36px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 100px;
}

#grand-central p {
  font-family: ff-meta-serif-web-pro;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6em;
  margin-top: 10px;
}

#grand-central .btn {
  margin-top: 20px;
  border-radius: 0;
  border-width: 2px;
  font-family: 'Darker Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 20px;
}

#grand-central .text {
  max-width: 960px;
  margin: auto;
  text-align: center;
}

.parallax-slider {
  font-size: 39px;
  background: transparent;
  color: white;
}
/*# sourceMappingURL=style.css.map */

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div class="parallax-window" data-parallax="scroll" data-image-src="https://thumbs.dreamstime.com/b/rainbow-love-heart-background-red-wood-60045149.jpg" data-z-index="1"></div>
    <section id="content">
        <div id="grand-central">
          <div class="text">
            <h3>Some text</h3>
          <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections.</p>
          <a class="btn btn-light btn-outline-dark btn-lg">Discover More</a>
          </div>
        </div>
    </section>
    <div class="parallax-window" data-parallax="scroll" data-image-src="https://thumbs.dreamstime.com/b/rainbow-love-heart-background-red-wood-60045149.jpg" data-z-index="1">
        <div class="parallax-slider">
          <span style="position:absolute; top: 400px; left: 400px;">Some Text</span>
        <p>Some other Content</p>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.5.0/parallax.js" integrity="sha512-5Pv5QdhmTB8oLr28Vs22tMM1hrLXkLLfi6GybfOzbe3QV/dnj3+ybvjUx1FfXKJygnXYbN9Oxzmk20AbltrIhA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  </body>
</html>

As you can see after running the code, the first parallax is working perfectly, however, there is nothing but white space in the 2nd parallax(the one after content). How do i make it so that the second parallax is seen with text above it.

This is the effect I am aiming for https://www.franckmuller.com/#home-new-models

Sorry if my question is not presented perfectly

Thanks!!!

Solution

Try this,

<div class="parallax-window" data-parallax="scroll" data-image-src="https://thumbs.dreamstime.com/b/rainbow-love-heart-background-red-wood-60045149.jpg">
  <div class="static-content">
    <h1>Some Text</h1>
 </div>
</div>


.static-content{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.parallax-window{position:relative;}

Working example JSFIDDLE