pixelcog / parallax.js

Simple parallax scrolling effect inspired by Spotify.com implemented as a jQuery plugin
MIT License
3.53k stars 840 forks source link

Problem with parallax-slider div #252

Closed yoran1998 closed 6 years ago

yoran1998 commented 6 years ago

Hi, I am facing some issues when I try to put some text over de parallax image. Without the <div class="parallax-slider> everything is working fine, but as soon as I put it there it shows just white on the page. Do you see what I am doing wrong and help me?

This is my html

<section class="home-section">
  <div class="parallax-home">
    <div class="parallax-slider">
      <span class="element" style="position:absolute; top:800px; left:800px;">Some text< /span>
    </div>
  </div>
</section>

My CSS

.parallax-home {
  min-height: 800px;
  background: transparent;
}

.parallax-slider {
  min-height: 800px;
  background: transparent;
}

My Javascript

$('.parallax-home').parallax({
      imageSrc: 'wp-content/themes/yoranvderve/dist/images/backgroundAfrika.jpg'});

Thanks

wstoettinger commented 6 years ago

Hi @yoran1998, you are mixing the two methods of initialization. either you use the parallax-slider class or you use the imageSrc option.

try setting your image as background of the parallax-slider via css and remove the option from your javascript!

yoran1998 commented 6 years ago

Thank you so much!

wstoettinger commented 6 years ago

I assume this is solved? I will close it