...

View Full Version : Hiding Overflow



DanHardy
07-03-2011, 04:01 PM
This might not be as simple as the title suggests.

Now for the question,

Please visit:

http://danielrhyshardy.com/header/demo.html

I am using the jquery plugin supersized to create a carousel of images in the background of the page. As you will see though, as the transition starts, the second image is visible. I only want it to be visible when it indeed starts to overlap the current image. (i.e when the bench image overlaps the trees etc)

Here is the CSS:





* { margin:0; padding:0; }
body { background:#111; height:100%; }
img{ border:none; }



#supersized { position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:50%; width:100%; }
#supersized img{ width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; } /*Speed*/
#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; } /*Quality*/

#supersized a { z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:50%; background:#111; display:block; }
#supersized a.prevslide { z-index:-20; }
#supersized a.activeslide { z-index:-10; }
#supersized a.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:50%; }
#supersized a.prevslide img, #supersized a.activeslide img{ display:inline; }



Thanks guys

Dan

Sammy12
07-03-2011, 07:39 PM
I didn't read the post much, but I wouldn't suggest messing with the jquery.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum