CODEWITHSUNDEEP
javascriptjqueryhtmlcssscroll
Paul
Paul

Reputation: 3368

Parallax Scrolling's effect staying in place instead of moving

I am attempting to add parallax scrolling to a page of mine and I am unsure of what I am doing wrong. This is how to set it up:

http://pixelcog.github.io/parallax.js/

I downloaded the library and put it in my file. I then called for it on the page, along with the jquery library. I then did this for my code:

<div class="home-img">
     <img src="/images/try.jpg" alt="">
     <div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
          <div class="home-img-text">Quality Solutions</div>
     </div>
</div>
.home-img {
   /*position: absolute;
    max-width: 100%;*/
    margin: auto;
    width: 100%;
    height: auto;
    vertical-align: middle;
}
.home-img img {
    width: 100%;
    position: absolute;
}
.parallax-window {
    min-height: 400px;
    background: transparent;
}

That is what the instructions are saying to my understanding. However, I tried removing my base img line <img src="/images/try.jpg" alt=""> and when I did that the img went away.

Does anyone have any idea what I am doing wrong?

This can be seen on my site, here:

Click here

Upvotes: 0

Views: 1061

Answers (1)

BinaryGhost
BinaryGhost

Reputation: 801

You forgot to load the Parallax.js library, change to line:

<script src="/path/to/parallax.js"></script>

to

<script src="/parallax.js-1.3.1/parallax.js"></script>

now the script will work. But the "home-img" div will need to look like this:

<div class="home-img">
 <div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
      <div class="home-img-text">Quality Solutions</div>
 </div>

This way you will be able to see the effect. If you will keep the image it will be above the effect.

EDIT I would recommend you use the browser inspect tools. This way you can see if all of the javascript loaded currectly.

In your case the console tab in the inspect tool showed the error:

http://optimumwebdesigns.com/path/to/parallax.js Failed to load resource: the server responded with a status of 404 (Not Found)

For chrome use this tutorial: https://developer.chrome.com/devtools

For firefox use this tutorial: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Upvotes: 1

Related Questions