How to create a fixed footer and fly on the body – Amazing effect

Fixed footer is going to show you, how to create a footer and its reveal effects on page scroll down using CSS. Normally, we need JavaScript to perform scrolling effects related to different user actions on web pages.

A beautiful website design comes from each and every element, a single element works with right property. Small animations and good color combination gives a beautiful website. Here

We need to create a footer that appears from bottom of the page while the user is scrolling down. Also, when they are scrolling the page up the footer needs to be hidden bottom of the page again.

To achieve this goal, first we have to create a footer with fixed position at the bottom of the screen and add some content and a footer to the page .

HTML

 <div class="container" style="margin-bottom:370px;position:relative;z-index:10;background:#fff;">
   <div class="content" style="padding:30px;">  
    Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down	<br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>
	Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/>Scroll Down <br/><br/> 
   </div>
   <div>
	  <img src="content.png" width="100%" style="display:block;" />
	</div>
 </div>
 <div class="content-footer">
  <img src="footer.png" width="100%" style="display:block;" />
 </div>

Give width and height to the footer, and fix its position to the bottom of the screen with the position:fixed; and bottom:0; properties.

Set the margin-bottom of the <body> tag equal to the height of the footer .

CSS

 <style>
 body{margin:0px;}
 .content-footer {
    position: fixed;
    bottom: 0;
    left: 0px;
    right: 0;
    padding: 0px 0 0;
    z-index:1;
    -webkit-transform: translate3d(0,0,0);
    background: #fff;
}
 </style>

In this code we used two images. In the body we used one image and in the footer we used another image.

Executed By using position property, Here we will apply position fixed and position relative.

How does it works ?

Its very easy to use follow the below steps.

step1

copy css and paste in style.css page or paste under head tag.

step2

add div structure in body page

Out Put

This way there will be enough space at the bottom for the footer to be visible when the user scrolls down the page.

Leave a Reply

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