How to add text over parallex scroll(jquery plugin)-CodePudding

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/[email protected]/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  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 >
            <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 >Discover More</a>
          </div>
        </div>
    </section>
    <div  data-parallax="scroll" data-image-src="https://thumbs.dreamstime.com/b/rainbow-love-heart-background-red-wood-60045149.jpg" data-z-index="1">
        <div >
          <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/[email protected]/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!!!

CodePudding user response：

Try this,

<div  data-parallax="scroll" data-image-src="https://thumbs.dreamstime.com/b/rainbow-love-heart-background-red-wood-60045149.jpg">
  <div >
    <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

CodePudding user response：

Try:

<div  >
  <div >
   <img src="../assets/img/horizon2020.jpg">
  </div>
 <div >
    <h1 style="position:absolute; top: 400px; left: 400px;">Some Text</h1>
 </div>

And:

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

Note: using the data-attribute data-parallax="scroll" will auto-initialize the parallax effect (but in this case on the wrong element!), using java script in this case is not necessary or vice-versa. Furthermore, the "parallax-window" will be inserted via javascript instead of the element with the data-attribute (so, you either don't need the window-div and move the data-attributes to the inner element "parallax-slider", or you initialize manually and remove the data-attributes and use the corresponding options in javascript).

If you want to have static Elements in front of the moving parallax, it won't work with data-attributes (which is only for simple use). In that case you need to initialize manually. Basically the javascript function will look for any ".parallax-slider" element within the element it is called on (can also have a different class than "parallax-window"), remove the slider from there and move it to a so called "mirror" Element. Therefore, if you want to "leave" some static content behind, you need to put it outside the parallax-slider.

I hope this helps!

Orignal post: https://github.com/pixelcog/parallax.js/issues/225.