search

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

Having trouble with data attributes #272

Open ninthony opened 5 years ago

ninthony commented 5 years ago

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,

georgema1982 commented 5 years ago

I have the same issue.