pixelcog/parallax.js

Having trouble with data attributes

Opened this issue · 1 comments

Hey all, love this little library. However, I cannot seem to get data attributes to work at all. I have tried setting the speed to 0 for static and tried disabling on mobile (which I believe it says is default) without any success. I'm not sure what the problem is.

code is as follows:

HTML:

<div class="parallax-window vanity-banner-container" data-speed="0.0" data-parallax="scroll" data-image-src="https://cdn.shopify.com/s/files/1/0016/3387/8103/files/vanityGlamBG.jpg?2591707482400048148">
  <div class="parallax-content-container">
    <img class="van-glam" src="https://cdn.shopify.com/s/files/1/0016/3387/8103/files/VanGlam.png?16888294906577413236"><span class="tm">&trade;</span>
    <div class="van-content">Here's some stuff that I want to show as content</div>
    <div class="van-shopBtn">SHOP</div>
  </div>

CSS:

  .parallax-window{
   height:500px; 
   background:transparent;
    margin-top:3%;
  }
  .parallax-mirror{
    z-index:100!important;
  }

The parallax works fine, and scrolls with the page, but I want to implement this into my employers website and I would like to have the option of working with the attributes later for when changes may arise. For instance, right now, the scrolling is still active even though in the above text I have the data-speed attribute set to "0.0":

<div class="parallax-window vanity-banner-container" data-speed="0.0" data-parallax="scroll" data-image-src="https://cdn.shopify.com/s/files/1/0016/3387/8103/files/vanityGlamBG.jpg?2591707482400048148">

Is there something I'm missing? I know the other attributes are working because my image wouldn't show up and scroll with my page if that was the case. Any help would be appreciated. Thanks,

I have the same issue.