Parallax doesn't work - Githubissues

AngelGordillo commented 6 years ago

Hello everybody! After one hour working with this plugin I couldn't make it work. I can't see the image and almost anything. I'd like to have the image in background and put elements over it Here it's my code, if someone helps me I'll be very happy.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="../assets/img/horizon2020.jpg">
  <div class="parallax-slider">
    <h1 style="position:absolute; top: 400px; left: 400px;">Some Text</h1>
    <h1>Some other Content</h1>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/parallax.js/1.4.2/parallax.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

    $('.parallax-window').parallax({
    naturalWidth: 600,
    naturalHeight: 400
    });
});
</script>
<style>
    .parallax-window {
    min-height: 400px;
    background: transparent;

}

</style>
</body>
</html>

wstoettinger commented 6 years ago

try:

<div class="parallax-window" >
  <div class="parallax-slider">
   <img src="../assets/img/horizon2020.jpg">
  </div>
 <div class="static-content">
    <h1 style="position:absolute; top: 400px; left: 400px;">Some Text</h1>
 </div>
</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!

wstoettinger commented 6 years ago

any news on that? otherwise i'm closing

AngelGordillo commented 6 years ago

Yes, thank you!!! Now make more sense. Sorry for the delay, I close the issue.

pixelcog / parallax.js

Parallax doesn't work #225