Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Banner > Scrolling (parallax) banner
Mottie (SuperAdmin) 10/23/2009 4:28 PM EST : Scrolling (parallax) banner
ACK!
Mottie
Posts: 3884

0
Like

0
Dislike

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
(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 class="layer" 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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
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!
%title%
%message%