Animated Website Background with HTML5

Every passionate web designer tries to build an eye-catchy design of a webpage. Whether he is working with page layout or background styles, he uses CSS animations to make these elements more attractive. Thus, animated background for a website is another concept to build creative HTML5 webpage templates.

In this tutorial, we are going to build an animated background using HTML5 and CSS animations. Basically, it’s a really simple and cool animation in which various boxes animate to the top of the page. In order to see this animation live, browse the demo page.

OK! you have seen various boxes smoothly move to the top of the page. Now, let’s get started with HTML coding to create this animated background.

HTML Structure for Animated Website Background

In HTML, you need to create two main div containers that will contain your webpage contents and background markup respectively. So, create the first div element with the class name “context” and place your page contents inside it. Similarly, create another div element with the class name “area” and place an HTML unordered list inside it.

<div class="context">
   <p> Your webpage contents goes here... </p>
</div>
<div class="area" >
   <ul class="circles">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
   </ul>
</div >

If you wanted to add this animated background to the whole webpage, just add context class to the body tag. Likewise, place the background markup (<div class="area" >...</div>) just after the body tag.

The CSS Styles

Now its time to make the background animated using CSS. So, first of all, we need to set an absolute position for the page content area. Make this area full using CSS 100% width property and set it to top 0.

.context {
    width: 100%;
    position: absolute;
    top: 0;
}

Similarly, set the 100% width for the animated area, define its background color and make its height 100vh to fit on the full page. In order to make it attractive we used the CSS gradient color, you can set any background color according to your choice.

.area{
    background: #4e54c8;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height:100vh;
}

Define the styles for (.circles selector) unordered list that will handle animated boxes. Set its width and height 100% respectively and keep its overflow to hidden.

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

Now, define some styles for animated boxes. Keep their position to absolute and define the width and height 20px respectively. In order to change the size of these boxes, you can set the custom value for both width and height. Similarly, you can use the border-radius property to make them circular.

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;  
}

After that, set the different the size and the position for circles list items using CSS nth-child selector. Likewise, set the various animation-delay and duration to make the eye-catchy movement for these elements.

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}
.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}
.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}
.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

Finally, define the keyframes for CSS animation and done.

@keyframes animate {
    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }
    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }
}

That’s all! I hope you like this animated website background created with HTML5 and CSS. If you have any questions or suggestions let us know by comment below.

You May Also Like

Leave a Comment