Background fade effect (javascript/jQuery)

[rents]

Hey everyone.

I'm looking to replicate an effect I saw on an app used on an iPad.

Basically, there's a background image and a layered, centered content section. As you scroll down, the opacity of the background starts to fade, without effecting the content section at all. By the time you scroll to the footer, the opacity is at around 10% or so.

Anyone know if this is possible using Jquery or can point me in the right direction?

Thanks for your time.

[feras]

Hello

to make this, you should separates between the div of the background and the other one which holds the content by setting their position to absolute and apply a z-index CSS property to make the content above the background.

I don't know how do iPad apps looking but I think that if you want that div to fade on scroll, you should get the height of the background div, and use the onscroll event to check how long the distance that user have scrolled to calculate the new fade value

I hope I could do fine

regards

[Vidya123]

Query is being used by more and more web designers nowadays to create simple animation in web pages. One of the most commonly used effect is the fade in/out effect which is used in image slideshows, button hovers, page loads and more.


Don't copy/paste content from other sites without recognition


See here: http://medienfreunde.com/lab/innerfade/

--kpac