SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)

    parallax not working

    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:

    Code:
    <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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #3
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    HI thanks. Hmm not sure why that is as I have the clouds.css and /js/easing.js uploaded there

    http://sakeenaheducationcentre.com/w...hop/clouds.css

    http://sakeenaheducationcentre.com/w...p/js/easing.js

    the css should be side to side with:

    http://sakeenaheducationcentre.com/w...hop/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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    In your HTML you have:

    HTML Code:
    <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/w...hop/clouds.css

    HTML Code:
    <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/w...p/js/easing.js

    I just checked again and I'm now also getting a 404 on BGParallax.js
    Code:
    GET http://www.sakeenaheducationcentre.com/js/jquery.BGParallax.js 404 (Not Found)

  5. #5
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    sorry I should have said that I'm using wordpress so the full url's show as http://sakeenaheducationcentre.com/w...emes/StyleShop and then the rest. My header file is located at http://sakeenaheducationcentre.com/w...hop/header.php and then my css files are side by side such as my http://sakeenaheducationcentre.com/w...Shop/style.css ( which works ) and this new http://sakeenaheducationcentre.com/w...hop/clouds.css ( which is not working ) then the js folder http://sakeenaheducationcentre.com/w...s/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. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #7
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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/show...arallax-effect

  9. #9
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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
    Code:
    <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. #10
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    I don't think this can work.

    You have this:

    HTML Code:
    <body>
    <div id="back"></div>
    <div id="midground"></div>
    <div id="foreground"></div>
    </body>
    and you are trying to do this:

    HTML Code:
    <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. #11
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    so how do I get my background image do animate with this if you see what I mean. I mean the clouds here

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    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. #13
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #14
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Whoa, that is trippy!!
    Do you want the clouds to be moving on their own?

  15. #15
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #16
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #17
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi,

    Quote Originally Posted by hantaah View Post
    GREAT NEWS!!! I figured it out. It was the z-index for the page wrap. It needed to be higher.
    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:

    Code:
    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
    This also means that Ali's function I pointed you at previously wouldn't have been much use in this case.

    Quote Originally Posted by hantaah View Post
    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 change the top / bottom / right / left in the css the clouds and sun dissapear or get cut off
    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. #18
    SitePoint Evangelist hantaah's Avatar
    Join Date
    Jul 2011
    Location
    Birmingham, Uk
    Posts
    549
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    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. #19
    Non-Member Wisestepp's Avatar
    Join Date
    Aug 2012
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    For starters, you are loading two copies of the jQuery library, both different versions. That is going to cause problems for sure.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •