Parallax Scrolling?

[lol no]

Hello. I'm in the process of trying to code a new skin and while I'm waiting for a member to finish up the background image, I decided to make a mock up of how I wanted the skin to look.

Mock-up link: i.imgur.com/43S9Huh.png

Live version: bunnytest.boards.net/

Right now on my forum, I'm using a horizontal accordion tab for the information for the site. If you hover over the "welcome [x]" text in the right hand corner, a drop down appears with the default avatar [or the user's avatar if uploaded - any tips on how to make a smoother drop down?], and if you scroll the menu bar at the top has its opacity reduced.

The background image for the site is the blond man you see in the mock up (I don't want to link to the full, since it's a WIP and I don't want someone running off with it). I'm interested in a parallax scrolling like effect where the BRSW circle logo you see appears before the forum area and fades from view when the user scrolls down. The best way I can describe this sort of effect is here and here. With the latter, I would just like one background image and to have the BRSW circle logo and perhaps some text underneath fade from view.

I'm more of a graphic designer than a coder, so does anyone have any advice on how to approach this and if this is feasible on Proboards? Thank you's in advance!

[Philip]

The drop-down with the avatar you could transition the max-height from 0 to x, that should give it a nice effect.

#beforewelcome{
 
   li{
     position:relative;

     #welcome{
        /** your styles **/
     }
     ul{
        position:absolute;
        top:0;
        left:0;
        width: 200px; /** define your width **/
        max-height:0;
        overflow:hidden;
        transition: max-height 0.3s linear;
     }
     &:hover{
       ul{
           max-height:200px; /** define your height here **/
       }
     }
   }
}

As for the Parallax Effect.

I would need to see the images. From your mockup it looks a little too busy for a good parallax effect.
Ideally you want to back most image slightly blurred also to give some depth of field.

Basically you want the 3 images to move(scroll) from the top at different speeds/heights, the back-most image moves the slowest and so on.

To illustrate the effect only

$(window).scroll(function(){
   var wScroll = $(this).scrollTop();

   $('.backmost-image').css({
      'transform' : 'translate(0px, '+ wScroll / 2 +'%)'
   });

   $('.middle-image').css({
      'transform' : 'translate(0px, '+ wScroll / 4 +'%)'
   });

   $('.frontmost-image').css({
      'transform' : 'translate(0px, '+ wScroll / 8 +'%)'
   });
});

[lol no]

Thanks for the speedy response Philip. I only want two images with this parallax scrolling:
1) The Logo I made - I want this element to appear on top of the BG image, but fade when the user scrolls from the top. Once this image fades out of view, the board area is immediately below.
2) This is the background image for the entire site

Hopefully I'm making sense? :3


I couldn't get the CSS to adjust with what you gave me - perhaps I am doing something wrong? I wasn't sure what you meant by "your styles here" in the welcome div.

[Philip]

I'll take a look at the images and try to come up with something along the lines of what you asked for.

I will also try get a snippet up for the css your having problems with

[lol no]

Philip Thank you! I really appreciate it. I'm trying to improve my own coding, since it's pretty useful. I knew what I wanted, just wasn't sure where to start code wise.

If you needed to see the CSS I'm using for the welcome menu drop down, here it is

<div style="width:100%;height:20px;background-color:#1c1c1c;top:0;left:0;position:absolute;border-bottom:5px solid #e9b61c; z-index:600;padding:5px;">
<div id="beforewelcome"><ul><li><p id="welcome">
{if !$[current_user.is_member]}
Welcome Guest.
{if $[login_link] || $[register_link]}
Please $[login_link]{if $[login_link] && $[register_link]} or {/if}$[register_link].
{/if}
{else}
<span>Welcome $[current_user.name].</span> $[logout_link]
{/if}
</p>

<ul><li><div class="avatarbg"><div class="avatarbg border"><center>$[current_user.avatar]</center></div></div></li></ul></li>
</ul></div>
</div>

And the CSS:
/*--- DROPDOWN ---*/

ul{
padding: 0;
list-style: none;

}
ul li{
text-align: right;
}
ul li a{
padding: none;
color: #E9A71C;
background: none;
text-decoration: none;
text-align:right;
margin-left:10px;
}
ul li a:hover{
color: #fff;
background: none;
border-radius:25px;
}
ul li ul{
display: none;
}
ul li:hover ul{
display: block; /* display the dropdown */

}

#beforewelcome {
text-align:right;
position:absolute;
right:25px;
}

.avatarbg {
background-color:#1c1c1c;
width:235px;
height:360px;
padding:10px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease
}

.avatarbg .border {
border:1px solid #fff;
width:215px;
height:300px;
margin-top:40px;
padding:10px;
}

[Philip]

I'm not free now but I should be able to come up with something this afternoon.

[lol no]

Sounds good to me. If I don't respond right away, no worries. I'm currently studying abroad in Japan so I'm 13 hours ahead of EST. Thank you again!

[Philip]

No worries.