Parallax not working

JavaScript
1

I’m trying to make some clouds move with a parallax effect but it doesn’t seem to be working.

I have placed this in the head:

<link rel="stylesheet" type="text/css" href="clouds.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript></script>
<script src="js/jquery.BGParallax.js" type="text/javascript"></script>
<script>
	
	$.BGP({
			backgroundStretch: "images/body-bg.fw.png",
			backImage: "images/back.png",
			midImage: "images/midground.png",
			foreImage: "images/foreground.png",
			backTime: 8000000,
			midTime: 9000000,
			foreTime: 10000000,
			backEase: '',
			midEase: '',
			foreEase: '',
			backX: "300000px",
			backY: "300000px",
			midX: "0px",
			midY: "500000px",
			foreX: "-8000px",
			foreY: "200000px",
			effect:"backgroundPosition"
		});
	
</script>

and all files and images in the necesaary places. Is there a problem with where I have positioned the code?
Much appreciation for any help in advance

here is the site Sakeenah Education Centre

2

Hi there,

when I inspect your page using the console in Chrome, I see:

Failed to load resource: the server responded with a status of 404 (Not Found) http://www.sakeenaheducationcentre.com/clouds.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.sakeenaheducationcentre.com/js/easing.js

That is to say, your page is trying to load these files and the server is responding with a 404.

Maybe you need easing.js for the parallax effect to work, probably the other file, too.

3

HI thanks. Hmm not sure why that is as I have the clouds.css and /js/easing.js uploaded there

http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/clouds.css

http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/js/easing.js

the css should be side to side with:

http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/header.php

with the easing.js in the js folder. Is there anything else that you can think of hat waould cause this not to work?

4

Hi,

In your HTML you have:

<link rel="stylesheet" type="text/css" href="clouds.css" />

That resolves to: http://www.sakeenaheducationcentre.com/clouds.css
File is located at: http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/clouds.css

<script src="js/easing.js" type="text/javascript"></script>

That resolves to: http://www.sakeenaheducationcentre.com/js/easing.js
File is located at: http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/js/easing.js

I just checked again and I’m now also getting a 404 on BGParallax.js

GET http://www.sakeenaheducationcentre.com/js/jquery.BGParallax.js 404 (Not Found)
5

sorry I should have said that I’m using wordpress so the full url’s show as http://sakeenaheducationcentre.com/wp-content/themes/StyleShop and then the rest. My header file is located at http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/header.php and then my css files are side by side such as my http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/style.css ( which works ) and this new http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/clouds.css ( which is not working ) then the js folder http://sakeenaheducationcentre.com/wp-content/themes/StyleShop/js ( with all the other js files working )

ok so putting in the full url seems to get it to work however not how I want it to. It’s back to the drawing board ( adobe ) to try again
Thanks for your help will be back though I think as not going according to plan so far

6

Hi,

Yeah paths can be a bit confusing in WP sometimes (<?php echo get_stylesheet_directory_uri(); ?> and all that).

Anyways, I just checked the page again and the errors seem to be gone, so I guess you got that part figured out.

Did that help with the parallax scrolling?

7

well putting in the fulpath made it behave strangely. It took away my front page slider ( so you could only see the left of it ) and no animations were visable. The only thing I can think of is the html in the code. In the code ( tutorial ) file it has this:

<body>


<div id="back"></div>
<div id="midground"></div>
<div id="foreground"></div>
</body>

I never placed this code anywhere as it is the clouds in the body background picture that I am trying to animate ( I mean this body bg with the clouds. So my goal is to move the clouds. Where and how then should I place the id’s above as there are 4 of them?

8

Hi hantahh,

I would imagine that the above code is relatively central to the parallax scrolling effect, but I’m not sure what you need to place where.

My advice would be to make the most basic demo you can (based on whatever tutorial you are following), then start to add to that, checking each step along the way.

BTW, there was a thread about parallax scrolling recently where Logic Ali presented a really nice solution.
Maybe you could use that: http://www.sitepoint.com/forums/showthread.php?948974-Help-needed-for-an-auto-scrolling-layered-parallax-effect

9

Ok so tried it on my wamp server and it all works but what I mean is that it’s only one html page on there so all I have is basically the header links and function call and the the html in the body

<body>


<div id="back"></div>
<div id="midground"></div>
<div id="foreground"></div>
</body>

Now trying to get this to work on my real website, the backgroud picture I want to animate is in the body tag itself, so at the moment my background is here:

<body id=“home-blog”> and my css is body { background-image: url(‘images/body-bg.jpg’); } so how to I get the 3 id’s ( #back, #midground, #foreground ) into the body tag for it to work, or am I wrong in thinking the id’s go there. I’m slightly confused

10

I don’t think this can work.

You have this:

<body>
<div id="back"></div>
<div id="midground"></div>
<div id="foreground"></div>
</body>

and you are trying to do this:

<body id="back">
  <div id="midground"></div>
  <div id="foreground"></div>
</body>

i.e. that one div encloses the other two.

Can you not just create an extra background div, place it within the body and set all the background properties on that?

11

so how do I get my background image do animate with this if you see what I mean. I mean the clouds here

12

If all you want to do is animate the clouds at a different speed to the content, I would recommend Logic Ali’s function that I mentioned in post#8.

I think it should work on the body element.

13

ok, I’ll take a look, right now you’ll probably laugh at what I got going on now

See it here ( I’ll be taking it off in a few mins tho )

14

Whoa, that is trippy!!
Do you want the clouds to be moving on their own?

15

it was worse, the clouds were falling like snow before that! I can get them to go different times and directions. I’m just trying to get them behind all the rest of the content ( ie the menus and sliders etc ) and trying to get the clouds lower ( behind the slider )

also, just noticed none of my menus or links work

16

GREAT NEWS!!! I figured it out. It was the z-index for the page wrap. It needed to be higher.

So I am left with one more thing to fix / know…
How do I move the clouds down more so they are not so close to the top and how do I move the sun more over to the right?

If I cahnge the top / bottom / right / left in the css the clouds and sun dissapear or get cut off

17

Hi,

Nice one!
However, it seems I misunderstood the effect you were aiming for.
I would have called that more of an animated background effect, as I was under the impression that parallax scrolling was an effect that you saw when you, well, scrolled …
However, I just checked wikipedia which says:

Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth ...

So, it seems you were right :slight_smile:
This also means that Ali’s function I pointed you at previously wouldn’t have been much use in this case.

Did you get this sorted out?
I just had a look at the site, and they look fine to me.
They disappear behind the main container div, which is what I would have thought was best.

Either way, nice site!

18

To be honest, all I really wanted initially was to animate the clouds. I had asked previously about this but to no avail then I found this parallax code from code canyon. It seems that parallax consists of 4 different layers all moving at different speeds and directions giving this 3d effect.

I like it and the idea very much!!!

I did sort out the issue after. It seemed that playing with the margins moved the whole layer and there are 4 layers so then each layer was overlapping the other so it required some sitting and thinking on so I kept the layers in the same places and added the extra space to the images themselves, that worked out

Thanks again for all your help - This forum is such a great place for learning! Another great learning curve!

19

For starters, you are loading two copies of the jQuery library, both different versions. That is going to cause problems for sure.