CODEWITHSUNDEEP
javascriptcssparallax
Ryder Thacker
Ryder Thacker

Reputation: 1482

Parallax Scrolling not working

I'm trying to incorporate parallax scrolling to my background where it moves at a slower rate relative to the web page content. I've been following tutorials but nothing is working I am stuck. Here is the jsfiddle - https://jsfiddle.net/batLeeyw/24/

and here is the javascript. Sorry I have a lot of html / CSS so I will leave that in the fiddle link. Also my background image is not showing up in fiddle but it is static when its supposed to parallax in the browser.

function parallax(){
            var para = document.getElementById("parallax-layer");
            para.style.top = -(window.pageYOffset / 4)+"px";
        }

        window.addEventListener("scroll", parallax, false);

Upvotes: 0

Views: 3388

Answers (2)

theoretisch
theoretisch

Reputation: 1728

I'm not sure what your goal exactly is, but try this:

remove:

background-attachment: fixed;

from the #parallax-layer id in the css. Change your js to:

function parallax(){
         var newtop = (window.pageYOffset / 2);
         $("#parallax-layer").css({top: newtop + 'px'});
         }

window.addEventListener("scroll", parallax, false);

See the result here in the fiddle.

With background-attachment: fixed the image will not move because it is, like the property says, fixed. It's just cutted.

The new js is just a little bit different, I used more jQuery and changed the 4 -> 2. So it scrolls slower than before. Hope that's what you asked for.

Upvotes: 2

Alex
Alex

Reputation: 2775

You have an error in your CSS syntax, you need to just add http:// before your image url:

background-image: url(http://link);

Working fiddle

Upvotes: 1

Related Questions