WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Multi layered scrolling background (sunrise effect)

Reply
  Thread Tools Display Modes
Old 14th May 11, 02:43 PM   #1
jonathan
WLC Member
 
Join Date: May 2011
Posts: 4
Default Multi layered scrolling background (sunrise effect)

Hi all,

I need some help with a little test I'm doing for creating a sunrise effect when the user is scrolling a page.

For an example see: http://www.vassal.nl/dawn-test/index.htm

Now this works nice as long as the page has enough content to display a scrollbar. If there is little content the body div doesn't stretch over the whole window height, see http://www.vassal.nl/dawn-test/index2.htm.

That can be easily fixed ofcourse (see url and click "load stylesheet for Fixed landscape"), but the way I did it breaks the scrolling page.

The effect I'm trying to create depends on three divs:
  • first div has full content height, minimum window height and has a fixed bg
  • second div has full content height, minimum window height and is aligned at the bottom of content
  • third div has full window height and is fixed at the bottom

The issue now is that the background of the third div is fixed, but when scrolling the div itself moves upwards, thus making the background dissapear.

Can anyone think of a nice and solid solution to fix this?
I'm guessing that it's probably very obvious, but I need to be feeded with some ideas

For source files see http://www.vassal.nl/dawn-test.zip

Thanks!
jonathan is offline   Reply With Quote
Old 14th May 11, 03:25 PM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: Multi layered scrolling background (sunrise effect)

And what happens if a user has a bigger resolution than the one you design it at?

One possible:
Give the html and body elements 100% height then set the content element height to overflow that, maybe 120% or 130%
chrishirst is offline   Reply With Quote
Old 14th May 11, 04:44 PM   #3
jonathan
WLC Member
 
Join Date: May 2011
Posts: 4
Default Re: Multi layered scrolling background (sunrise effect)

Resolution should not matter.

The sky layer is always fixed at the top of the viewport and has a png gradient (which should flow towards the body bg color for large screens)
The silhouette layer is always fixed at the bottom of the viewport (repeat-x)

The dawn layer in between is a transparent gradient that blends with the sky and is positioned from the bottom of the content.
Only thing that happens with very large screens is that they have to scroll further to see the sun rise

I made a little progress (see update to example site), but still doesn't work as supposed to.

I tried to set the content element to 100+% but that doesn't seem to do anything.
jonathan is offline   Reply With Quote
Old 4th June 11, 12:11 AM   #4
jonathan
WLC Member
 
Join Date: May 2011
Posts: 4
Default Re: Multi layered scrolling background (sunrise effect)

I did find a semi-solution by setting a few element's heights with javascript, but that's not a real fix. If anyone still knows a better solution, please let me know!
jonathan is offline   Reply With Quote
Old 21st October 12, 10:13 PM   #5
jonathan
WLC Member
 
Join Date: May 2011
Posts: 4
Default Re: Multi layered scrolling background (sunrise effect)

Through analytics I noticed some traffic coming from this thread to the (broken) url's in my first post, so I put them back up.

Feel free to digg into the source and if you have any suggestions please respond.

Enjoy
jonathan is offline   Reply With Quote
Old 22nd October 12, 10:43 AM   #6
HemZone
WLC Member
 
Join Date: Oct 2012
Posts: 15
Default Re: Multi layered scrolling background (sunrise effect)

Try to add below value

#content {min-height:780px;}
__________________
Instead of spending time in social media, I would love to do help people
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
HemZone is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:00 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.