How to Make Floating Panel Animation in HTML

Hello, viewer. In this article I will teach you how to make floating panel animation. You have seen lots of animation but this is totally different to others. I have use CSS clip-path property for creating this animation you can see this in below code. lots of people don’t know what is use of CSS clip-path animation in CSS. so don’t worry about it I will tell you what is CSS clip-path animation. CSS clip-path property is use creating a path shape for example inset, circle, ellipse, polygon, path etc. in this project I have use CSS clip-path circle. so, let’s start the practical.

How to Make E-Product Admin Dashboard Design

first step you create a html file. then you create a div that’s class name is floating as you see in code. after then you can create another div that class name is cover. insert text inside cover class according to your need. and also insert text inside floating div.  You can also copy the below code.

How to make Awesome CSS Border Animation Using HTML & CSS

HTML Code

<!DOCTYPE html>
<html>
<head>
	<title>Floating Div</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="floating">
	<div class="cover">
		<h2>Hello</h2>
	</div>
	<h2>Floating Panel</h2>
	<p>Lorem ipsum Lorem ipsum  Lorem ipsum Lorem ipsum Lorem ipsum  Lorem ipsum Lorem ipsum Lorem ipsum  Lorem ipsum Lorem ipsum Lorem ipsum  Lorem ipsum <p>
</div>

  


</body>
</html>

now you can create a CSS file and link your CSS file in html document. You can see the CSS code. I have use CSS clip-path circle for this effect. You can copy this code and paste in your CSS file.

CSS Code

body{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #320d3e;
  font-family: system-ui;
  overflow: hidden;
}
.floating{
  position: relative;
  width: 90%;
  padding: 20px;
  max-width: 200px;
  max-height: 250px;
  background: #910f9b;
  border-radius: 5px;
  color: white;
  transition: all .3s ease;
  animation: float 2.5s ease-in-out 0s infinite forwards;
}
.cover{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: #fecd92;
  transition: all .5s ease;
  clip-path:circle(12% at 0px 0px);
  display: flex;
  color: #320d3e;
  justify-content: center;
  align-items: center;
}
.floating:hover .cover{
  cursor: pointer;
  clip-path:circle(75%);
}
@keyframes float{
  0%{
    transform: translateY(0);
    box-shadow: 0 45px 25px -15px #000000050;
  }
  50%{
    transform: translateY(-5px);
    box-shadow: 0 45px 25px -15px #000000050;
  }
  100%{
    transform: translateY(0);
    box-shadow: 0 45px 25px -15px #000000050;
  }

}

You can Watch this video tutorial how to make a floating panel

Leave a Reply

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