Question

I have a fullscreen overlay, I have it set up in jfiddle currently so it just fades in
http://jsfiddle.net/9NJP9/1/
What I’d like it to do instead of fade is animate down from the top of the screen down to the bottom; slides down. My site is longer then the screen height, when the button is clicked though I don’t really want it to slide down from the top of the entire site all the way to the bottom of the page, just from the top of the screen to the bottom of the screen, and then stay there even when someone scrolls. I’m just not sure how to manipulate the css to do this.

Any help I can get with this would be great, thanks.

Answer 1

Here, http://jsfiddle.net/9NJP9/8/

For the slide down effect, instead of changing the opacity from 0 to 1, you could change the top property from something like -500px or -50% to 0. In the fiddle, I’ve set it to transition from -100% to 0. Also, instead of CSS for just webkit browsers, you need to make your effect cross-browser compatible. I’ve modified the CSS accordingly.

.fullscreen_hide {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    z-index: 1000;
    height: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: -100%;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

.fullscreen_show {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -o-transition-property: all;
    -ms-transition-property: all;
    transition-property: all;

    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -ms-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
    position: absolute;
    height: 100%;
    z-index: 1000;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #141414;
}

As @MichaelGiovanniPumo pointed out, you should try out jQuery as well. It makes life much more comfortable. 🙂