Implement the popular footer reveal effect

When designing my blog, I wanted to implement the footer reveal effect which has become a trend now a days in modern web design. It’s a really cool effect and relatively easy to achieve with a couple of CSS lines. So, in this article we’ll see how to exactly achieve that. First of all, we need to add the following CSS properties to the footer.

footer {
    position : fixed; /* setting a fixed position. */
    /* defining negative zindex */
    /* to hide it behind the main contents. */
    z-index : -1;
    height: 400px; /* set it according to your need. */
    bottom : 0; /* making it fixed at the bottom */
}

`Now, add the following CSS properties to the immediate sibling before the footer. It depends on your markup, suppose you have a div with an id of content. So, you need to target that container and add the following CSS properties and values.

div#content {
    /* it's exactly the height of the footer. */
    /* Otherwise it'll lag behind or overlap.*/
    margin-bottom: 400px;
    /* adding a box shadow to give it look revealing effect.*/
    box-shadow: rgba(0,0,0,.8) 0 20px 30px -20px;
}

Now, we need to make it responsive because the footer has no absolute height, so we’ll need to make adjustments to the margin-bottom of the div#content for different screen sizes. We can use CSS media queries and there’s another easy way to achieve that using JavaScript to take care of the margin-bottom of the div#content. Now, if you do want to avoid JavaScript, then media queries are here to help you.

/* For Extra Large screens /wide desktops */
@media only screen and (max-width: 1200px) {
    div#content {
        /* set it according to your need. */
        margin-bottom: 400px;
    }
}

/* For Large screens / desktops */ 
@media only screen and (max-width: 992px) {
    div#content {
        /* set it according to your need. */
        margin-bottom: 500px;
    }
}

/* For Medium screens / tablets */
@media only screen and (max-width: 768px) {
    div#content {
        /* set it according to your need. */
        margin-bottom: 600px 
    }
}

/* For Small screens / mobile */
@media only screen and (max-width: 576px) {
    div#content {
        /* set it according to your need. */
        margin-bottom: 700px
    }
}

Now, Let’s do that with a couple of  lines of  JavaScript.

// Getting the height of the footer
let footer = document.querySelector("footer"),
    footerHeight = footer.offsetHeight;

// Setting the margin bottom equal to the footer_height
let content = document.querySelector("div#content");
style.marginBottom = footerHeight;

That’s it! That’s how you can implement the footer reveal effect to your site. It is simple as that.

Leave a Reply

Your email address will not be published. Required fields are marked *