Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Help from the Community > Scrolling (Parallax) Banner
Mottie (MVP) 10/23/2009 5:32 PM EST : Scrolling (Parallax) Banner
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Scrolling (Parallax) Banner

I found this great jQuery plugin that allows you to add images that overlap and scroll at different rates so as to give it a parallax appearance.

Check out this example, or check out my Test Site 2.

The example is a composite of four images:
Top Layer
(Flags)
Layer 2
(Bird)
Layer 3
(Title)
Background
(Forest)

 1123 x 234  837 x 312  700 x 265
 1440 x 900

The Code
<style type="text/css">
#parallax {
 width: 900px;
 height: 320px;
 position: relative;
 overflow: hidden;
 margin: 0 auto;
}
#parallax .layer, #parallax img { position: absolute; }
</style>

<div id="parallax">

 <div class="layer" style="width: 900px; height: 200px;"><!-- Background - actual size: 1440 x 900 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/sky.jpg" alt="" style="top: -450px; left: -100px;"/>
 </div>

 <div class="layer" style="width: 700px; height: 265px;"><!-- Layer 3 - actual size: 700 x 265 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/title.png" alt="" style="top: -10px; left: 0;" />
 </div>

 <div class="layer" style="width: 920px; height: 274px;"><!-- Layer 2 - actual size: 837 x 312 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/birds.gif" alt="" style="top: 0; left: 200px;" />
 </div>

 <div class="layer" style="width: 1123px; height: 234px;"><!-- Top Layer - actual size: 1123 x 234 -->
  <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/flags.gif" alt="" style="top: -150px; left: 20px;"/>
 </div>

</div>

<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/jqueryjparallax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $('#parallax .layer').parallax();
});
</script>
Customizing

  • The CSS

    • The size of your banner is set in the CSS, in this case the size is 900 x 320 pixels.

    • The banner is center in this case using "margin: 0 auto;", remove this if you don't want it centered.

    • I think it might be best to add this CSS to the Custom CSS because when I added it to the banner area with the HTML, it was ignored at times.

  • Each Image

    • Note that the order of the images in the HTML starts with the background image then each image after it becomes a layer above ( I hope that makes sense ).
    • There is no set limit on how many images you can add into the parallax window, but follow this template when you add more:

       <div style="width: 920px; height: 274px;">
        <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/birds.gif" alt="" style="top: 0; left: 200px;" />
       </div>

    • The width and height (in red) were adjusted to get the desired amount of scrolling inside the parallax window; the closer this height and width are to the banner the less scrolling you'll get.

    • I've left in the actual image size (in the code above, in green) so you can see the difference in size from the window size

    • The image URL is in orange.

    • The top and left parameters (also in red) adjust the starting position of the image inside the parallax window. These parameters are also adjusted to get the desired effect.

  • The Script

    • Add the javascript into your banner or footer HTML.

Edit (3/5/2011): Updated to work with a newer version of the Parallax plugin.
TopBottom

Guppy Queen (New Admin) 10/23/2009 6:01 PM EST : RE: Scrolling (Parallax) Banner
Guppy Queen
Posts: 41034
Zomgawsh Poster

wow, neat!
TopBottom

Keilana55 (Guild Admin) 2/25/2010 4:38 PM EST : RE: Scrolling (Parallax) Banner
Keilana55
Posts: 4537
Zomgawsh Poster

Where do I paste this code please?

Also, I would like to know if anyone recommends a resource for other images of the right size to use for each layer?

TopBottom

Mottie (MVP) 3/5/2011 3:02 PM EST : RE: Scrolling (Parallax) Banner
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

I've updated this code to start working again!

And Keilana55... wow it took me a year to reply o.O... Paste the code in the header area (Control Panel > Custom HTML & Script > Header Area). Also, the images in each layer don't necessarily have to be the same size as the window. You can just position it inside the view port.
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%