- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hello,
I’d like to fade out a div when the page is scrolled, similar to this site:
http://themetrust.com/demos/hero/
Here is my effort:
http://www.mharrisweb.co.uk/tester.htm
Its getting there but can anyone please tell me how I can fix and scroll over the background like in the hero theme and make it slicker?
Many thanks
by looking in his code this is what drives the animation.
///////////////////////////////
// Parallax
///////////////////////////////
// Calcualte the home banner parallax scrolling
function scrollBanner() {
//Get the scoll position of the page
scrollPos = jQuery(this).scrollTop();
//Scroll and fade out the banner text
jQuery(‘#bannerText’).css({
‘margin-top’ : -(scrollPos/3)+”px”,
‘opacity’ : 1-(scrollPos/300)
});
//Scroll the background of the banner
jQuery(‘#homeBanner’).css({
‘background-position’ : ‘center ‘ + (-scrollPos/8)+”px”
});
}
and then he detects the scrolling event and call that function every time.
jQuery(window).scroll(function() {
scrollBanner();
});
hope that was helpful.
Thanks very much for your reply.
I have this example working:
Is there anyway I can stop the green div scrolling over the top of the navigation?
Thanks again
Hey,
Is your image in the background of that lime green div, or he background of the page? Could you not just make the div transparent? Sorry if this seems like a dumb suggestion, but it’s such a cool effect, I’m going to have a crack at it myself now!
Ben.