Vertically slideown over whole page

Question

i'm working on a project where i need a semi-transparent div to slideover the entire page at a certain point. i have a version working currently, but it's not as smooth as i'd like it to be.

http://jsfiddle.net/27e310e8/

jQuery from above example:

var windowWidth = $(window).innerWidth();
var windowHeight = $(window).innerHeight();

function blackOut() {
    $('#fail-screen').css({
        "width": windowWidth + "px",
            "height": windowHeight + "px"
    });

    $('#fail-screen').delay(1000).animate({
        top: '0px'
    }, 1000, 'linear');
}



$(document).ready(function () {
    blackOut(windowWidth, windowHeight);
});

as you can see i'm getting the innerWidth and height to set the "fail-screen" div, as setting it to 100% wasn't working well. i'm using jQuery to animate the top position of the "fail-screen" div.

again, i'm just looking to refactor this code and improve overall presentation and performance. i'm open to using animation/physic libraries if anyone knows of any that would be good to use here.

appreciate any suggestions.

Answer 1

As @Jason has mentioned, I strongly recommend using CSS transforms instead of fiddling with the offsets. That is being not only are CSS transforms offloaded to the GPU (intelligently determined by the browser as of when needed, but you can also force it), but it allows for subpixel rendering. Paul Irish published a rather good write-up on this topic back in 2012.

Also, your code is slightly problematic in the sense that it fails to handle viewport resize events. In fact, a more straightforward solution would simply be using position: fixed , and then playing around with CSS transform to bring the element into view after a delay.

See updated fiddle here: http://jsfiddle.net/teddyrised/27e310e8/2/

For the JS, we simply use the .css() method. The delay, animation duration and even the timing function can be easily done via CSS.

The new JS is rather straightforward: we set the transform of #fail-screen so that we move it back to its original vertical position. jQuery automagically prefixes the transform property ;)

$(document).ready(function () {
    $('#fail-screen').css({
        'transform': 'translateY(0)'
    });
});

For the CSS, we initially set a vertical translation ( translateY ) of -100%, which means we push the element upwards by its own height. Using fixed positioning and declaring all four offsets as 0 , we can force the element to fill the viewport without any advanced hack of listening to window resize events via JS. Remember that you will have to add vendor prefixes to the transform property to maximize cross-browser compatibility.

CSS can also handle transition delay, duration and even the timing function, ie transition: [property] [duration] [timing-function] [delay]; Since in your jQuery code you have set both duration and delay to be 500ms, it should be transition: all 0.5s linear 0.5s . However, the linear timing function doesn't look good — perhaps using ease-in-out would be better, or even a custom cubic-bezier curve , perhaps?

Also, I recommend moving the opacity to the background-color value, simply because if you set an opacity on the element itself, all child nodes will be rendered at 0.6 opacity, too... it might be something that you do not want to achieve.

#fail-screen{
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0,0,0,.6);  /* Moved opacity to background-color */
    position: fixed;                   /* Use fixed positioning */
    z-index: 303;

    /* Use CSS transform to move the element up by its own height */
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);

    /* CSS transition */
    transition: all .5s ease-in-out .5s;
}