HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Parallax Background Effect

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#35543 (In Topic #8020)
Avatar

Community saint

Well a few days ago I found a java script that adds a very nice looking effect using two backgound images, I brough it up to chris and he was kind enough to help me implement it onto my site and it works but I'm having some issues and I dont want to keep bothering chris so I figured that I would see if some of you other guru's on here would be able to help me out, I'm pretty sure I know why its doing what its doing but I'm not to sure how to remedy this problem.

Here is what I have changed with a lot of help from chris.

In HEADER.tpl

Code

<body onload="Javascript: scriptLoadStuff()" id="ground" style="{$?,{$OR,{$EQ,{$ZONE},adminzone},{$EQ,{$ZONE},cms}},,width: 1024px; position: relative; margin: 0 auto 0 auto}"><div id="clouds">
  In FOOTER.tpl

Code

<blockquote id="javascriptcode"></blockquote></div></body>
  In GLOBAL.css

Code

#ground {
  background-image: url('{$BASE_URL}/uploads/website_specific/gbl_background.png');
  background-repeat: repeat;
  background-attachment: fixed;
}

#clouds {
  background-image: url('{$BASE_URL}/uploads/website_specific/clouds.png');
  background-repeat: repeat;
  background-attachment: fixed;
}

* html #clouds {
  /* because IE6 can't do transparent PNGs for backgrounds */
  background-image: url('{$BASE_URL}/uploads/website_specific/clouds.gif');
}

#javascriptcode {
   background-image: url('{$BASE_URL}/uploads/website_specific/gbl_background.png');
   background-repeat: repeat;
}
  In JAVASCRIPT.tpl I added

Code

   var i;
  window.onscroll = function() {
    var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset;
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset;

    var ground = document.getElementById('ground');
    var groundparallax = calcParallax(53, 8, posY);
    ground.style.backgroundPosition = "0 " + groundparallax + "px";

    var clouds = document.getElementById('clouds');
    var cloudsparallax = calcParallax(400, .5, posY);
    clouds.style.backgroundPosition = "0 " + cloudsparallax + "px";
  }

  document.getElementById('javascriptcode').onscroll = function() {
    var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset;
    var j = calcParallax(53, 16, posX);
    console.log('scroll js: '+ j);
    document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0";
  }
  And all that controls the speed of a fixed background image. Working DEMO and Code Here

Now the problem that I'm having is I am using a fixed width site as you can see from my HEADER.tpl which seems to be causing the problem the gbl_background.png covers the whole page and thats what I want but when it renders the clouds.png it only renders it in the middle of the page and I can't for the life of me figure out how to fix this issue any help would be greatly appriciated.

If you would like to use this code on your site please give the creator his props by adding this to the end of your JAVASCRIPT.tpl

Code

function calcParallax(tileheight, speedratio, scrollposition) {
  //    by Brett Taylor http://inner.geek.nz/
  //    originally published at http://inner.geek.nz/javascript/parallax/
  //    usable under terms of CC-BY 3.0 licence
  //    http://creativecommons.org/licenses/by/3.0/
  return ((tileheight) - (Math.floor(scrollposition / speedratio) % (tileheight+1)));
}
 

 I'm not real big on building skins as of right now but if you would like some custom graphics done for your site I am more than willing as long as I have the time. -\-PhrozenStudios-/-
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: