GuildPortal will be going offline (permanently) by the end of the month.
Sign Up! Login: Password: New User? Forgot? Support
Forums : Banner > Scrolling (parallax) banner
Mottie (SuperAdmin) 10/23/2009 4:28 PM EST : Scrolling (parallax) banner
Posts: 3884



Scrolling (Parallax) Banner

GuildPortal admin site link to the original post

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
Layer 2
Layer 3
 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; }

<div id="parallax">

 <div class="layer" style="width: 900px; height: 200px;"><!-- Background - actual size: 1440 x 900 -->
  <img src="" alt="" style="top: -450px; left: -100px;"/>

 <div class="layer" style="width: 700px; height: 265px;"><!-- Layer 3 - actual size: 700 x 265 -->
  <img src="" alt="" style="top: -10px; left: 0;" />

 <div class="layer" style="width: 920px; height: 274px;"><!-- Layer 2 - actual size: 837 x 312 -->
  <img src="" alt="" style="top: 0; left: 200px;" />

 <div class="layer" style="width: 1123px; height: 234px;"><!-- Top Layer - actual size: 1123 x 234 -->
  <img src="" alt="" style="top: -150px; left: 20px;"/>


<script type="text/javascript" src=""></script>
<script type="text/javascript">
  $('#parallax .layer').parallax();

  • 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 class="layer" style="width: 920px; height: 274px;">
        <img src="" alt="" style="top: 0; left: 200px;" />

    • 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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems

New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
Who's Online 
There are   members online.
So-and-so has logged on!