Hello viewers, Today in this website you’ll learn to create a Full Screen Search Bar Animation Hover HTML this will be CSS that is certainly making use of JavaScript. Earlier I’ve shared an internet log on simple tips to create a Responsive Navigation Bar using HTML & CSS. And from now on I’m going to develop a Search Bar this is certainly full-Screen Animation.
 |
| Full Screen Search Bar Animation Hover using HTML CSS & JavaScript |
A search community, search business, or search club is just a feature that is visual in computer system programs, such file managers or ie, and on sites. It truly works as the field when it comes to appropriate question input or searches term through the user to locate and recover linked data during the database.
In this system (Full Screen Search Bar Animation Hover), in the first place, when you look at the site, there may be merely a Search Icon or Search Button but as soon as you pick that secret then site display fills with gradient back ground color and reveal the search feedback industry with smooth animation this is actually growing the market this is certainly biggest regarding the web site. There are shown the search icon for the search and cancel secret to cancel that search page.
This search service is created just for design functions and also this planned system won’t retrieve any data or information once you joined up with some offered information and search. If you’re experience difficult to determine what I will be saying. You will see a video clip this is certainly full on the planned program(Full Screen Search Bar Animation Hover).
Video Tutorial of Full Screen Search Bar Animation Hover
This is certainly genuine of Full-screen Search Bar program and I hope you’ve recognized the basic codes behind creating this system into the video, you’ve seen the animation. I utilized jQuery into the accepted place of JavaScript because jQuery reduces the rules and that can be javaScript. You can actually boost codes to this system and might retrieve information from the database for a search that is specific once you know PHP/Mysqli.
If you would like this planned program(Full Screen Search Bar Animation Hover) and would like to get resource codes. It's an easy task to receive the supply rules associated with the system. To get the resource codes you just would you like to scroll straight down.
Full-Screen Search Bar Animation [Source Codes]
To develop this planned program(Full Screen Search Bar Animation). First, you will need to develop two Files one HTML File as well as a differnt one is CSS File. After producing these files merely paste the guidelines that could be after your file.
First, build an HTML file utilizing the name that is genuine of.html and paste the given principles in your HTML file. Consider, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingWang -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>FullScreen Search Box | CodingWang</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="close-btn">
<span class="fas fa-times"></span>
</div>
<div class="wrapper">
<div class="search-btn">
<span class="fas fa-search"></span>
</div>
<div class="search-data">
<input type="text" required>
<div class="line"></div>
<label>Type to search..</label>
<span class="fas fa-search"></span>
</div>
</div>
<script>
$(".search-btn").click(function(){
$(".wrapper").addClass("active");
$(this).css("display", "none");
$(".search-data").fadeIn(500);
$(".close-btn").fadeIn(500);
$(".search-data .line").addClass("active");
setTimeout(function(){
$("input").focus();
$(".search-data label").fadeIn(500);
$(".search-data span").fadeIn(500);
}, 800);
});
$(".close-btn").click(function(){
$(".wrapper").removeClass("active");
$(".search-btn").fadeIn(800);
$(".search-data").fadeOut(500);
$(".close-btn").fadeOut(500);
$(".search-data .line").removeClass("active");
$("input").val("");
$(".search-data label").fadeOut(500);
$(".search-data span").fadeOut(500);
});
</script>
</body>
</html>Second, create a CSS file due to the name that is correct of.css and paste the given codes in your CSS file. Keep in mind, you’ve to generate a file with .css development.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
position: relative;
font-family: 'Poppins', sans-serif;
}
.wrapper, .search-data{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wrapper{
position: fixed;
height: 0px;
width: 0px;
border-radius: 100%;
background: linear-gradient(-135deg, #dd0909d5, #d90000);
transition: all 0.4s linear;
}
.wrapper.active{
height: 4000px;
width: 4000px;
}
.search-btn{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 60px;
width: 60px;
text-align: center;
cursor: pointer;
border-radius: 50%;
background: linear-gradient(-135deg, #e90303de, #d90000);
}
.search-btn span{
color: #fff;
font-size: 22px;
line-height: 60px;
}
.search-data{
position: absolute;
height: 50px;
width: 400px;
display: flex;
text-align: center;
/* display: none; */
}
.search-data input{
height: 100%;
width: 100%;
background: none;
border: none;
outline: none;
font-size: 22px;
font-weight: 500;
color: #fff;
}
.search-data .line{
position: absolute;
height: 3px;
width: 100%;
background: #fff;
bottom: 0;
transform: scaleX(0);
transition: transform 0.4s 0.3s linear;
}
.search-data .line.active{
transform: scaleX(1);
}
.search-data label{
position: absolute;
top: 50%;
left: 0;
font-size: 20px;
transform: translateY(-50%);
pointer-events: none;
color: rgba(255,255,255,0.7);
}
.search-data input:valid ~ label{
opacity: 0;
}
.search-data span{
color: #fff;
position: absolute;
width: 50px;
font-size: 25px;
right: 0;
top: 0;
line-height: 45px;
cursor: pointer;
}
.close-btn{
position: absolute;
z-index: 99;
right: 25px;
top: 25px;
font-size: 25px;
color: #fff;
cursor: pointer;
}
.search-data, .search-data span,
.search-data label, .close-btn{
display: none;
}That’s all, now you’ve effectively create a Full-Screen Search Bar Animation HTML that is CSS that is using JavaScript. Then kindly comment down or e mail us through the contact web page as soon as your rule doesn't work or you’ve skilled any error/problem.
Post a Comment