Introduction
An animated search form provides a dynamic and interactive way for users to search content on your site. By animating the appearance of the search field, you can make your website look modern and improve the user experience. In this tutorial, you'll learn how to create a simple, animated search form using HTML, CSS, and a bit of JavaScript.
Problem Statement
Create a search form that:
- Starts as an icon or small element.
- Expands into a full search input field when clicked.
- Includes a smooth animation for both expanding and collapsing the input field.
Example:
- Input: The user clicks on the search icon.
- Output: The search form expands with a smooth animation.
Solution Steps
- Create the Search Form Structure: Use HTML to define the search input and search button (icon).
- Style the Search Form with CSS: Apply animations and transitions using CSS.
- Handle Search Form Expansion with JavaScript: Use JavaScript to expand and collapse the search form when the user clicks on the search icon.
HTML, CSS, and JavaScript Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Search Form</title>
<style>
/* Step 1: Style the search container */
.search-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
transition: width 0.5s ease;
}
/* Step 2: Style the search input */
.search-input {
width: 0;
padding: 10px;
font-size: 16px;
border: 2px solid #3498db;
border-radius: 20px;
outline: none;
transition: width 0.5s ease, padding 0.5s ease;
opacity: 0;
}
/* Step 3: Style the search icon (button) */
.search-button {
position: absolute;
right: 10px;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: #3498db;
}
/* Step 4: Expanded search input */
.search-container.expanded {
width: 250px;
}
.search-container.expanded .search-input {
width: 100%;
padding: 10px 40px 10px 20px; /* Padding adjusted for the button */
opacity: 1;
}
/* Optional: Some additional styling */
.search-container .search-input:focus {
border-color: #2980b9;
}
</style>
</head>
<body>
<div class="search-container" id="searchContainer">
<input type="text" class="search-input" id="searchInput" placeholder="Search...">
<button class="search-button" id="searchButton">
🔍 <!-- Unicode search icon -->
</button>
</div>
<script>
// Step 5: Add JavaScript for toggling the animation
const searchContainer = document.getElementById("searchContainer");
const searchButton = document.getElementById("searchButton");
const searchInput = document.getElementById("searchInput");
// Expand and collapse the search input on button click
searchButton.addEventListener("click", function() {
searchContainer.classList.toggle("expanded");
searchInput.focus(); // Automatically focus on the input when expanded
});
// Close the search input when clicking outside
document.addEventListener("click", function(event) {
if (!searchContainer.contains(event.target)) {
searchContainer.classList.remove("expanded");
}
});
</script>
</body>
</html>
Output
Explanation
Step 1: Create the Search Container
The .search-container
is styled with flexbox
to align the input field and button. The initial width is set to 40px
, making it look like a small button at first. When expanded, this container will grow smoothly.
.search-container {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px; /* Initially small width */
transition: width 0.5s ease; /* Smooth transition for width change */
}
Step 2: Style the Search Input
The .search-input
is hidden initially by setting its width to 0px
and making its padding minimal. It expands when the user clicks the search button. The transition
property makes the width and padding changes smooth.
.search-input {
width: 0;
padding: 10px;
font-size: 16px;
border: 2px solid #3498db;
border-radius: 20px; /* Rounded corners */
outline: none;
transition: width 0.5s ease, padding 0.5s ease;
opacity: 0; /* Initially hidden */
}
Step 3: Style the Search Button
The search button is initially displayed as an icon (🔍
), which is a Unicode character for a search icon. It is absolutely positioned to stay next to the input field. The button has a transparent
background to blend in with the input field.
.search-button {
position: absolute;
right: 10px;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 24px;
color: #3498db;
}
Step 4: Expanded Search Input
When the .expanded
class is added to the .search-container
, the width of the container expands, and the input field’s width increases, becoming fully visible.
.search-container.expanded {
width: 250px; /* Expands the container */
}
.search-container.expanded .search-input {
width: 100%; /* Expands the input field */
padding: 10px 40px 10px 20px; /* Padding adjusts to fit the button */
opacity: 1; /* Input becomes visible */
}
Step 5: JavaScript for Interaction
JavaScript is used to toggle the .expanded
class on the .search-container
. When the search icon (button) is clicked, the container expands, and the input field is focused. If the user clicks outside the form, the search form collapses.
const searchContainer = document.getElementById("searchContainer");
const searchButton = document.getElementById("searchButton");
const searchInput = document.getElementById("searchInput");
// Expand and collapse the search input on button click
searchButton.addEventListener("click", function() {
searchContainer.classList.toggle("expanded");
searchInput.focus(); // Automatically focus on the input when expanded
});
// Close the search input when clicking outside
document.addEventListener("click", function(event) {
if (!searchContainer.contains(event.target)) {
searchContainer.classList.remove("expanded");
}
});
toggle("expanded")
: Adds or removes the.expanded
class to trigger the animation.searchInput.focus()
: Automatically focuses on the input field when it expands.- Closing when clicking outside: If the user clicks anywhere outside the form, the search field collapses.
Customization
Change Expansion Width
You can easily adjust the expanded width of the search form by modifying the .search-container.expanded
rule:
.search-container.expanded {
width: 300px; /* Wider search input */
}
Customize the Search Icon
If you prefer using an icon font such as Font Awesome, you can replace the Unicode icon with a Font Awesome icon like so:
<button class="search-button" id="searchButton">
<i class="fas fa-search"></i>
</button>
Make sure to include the Font Awesome CDN in the <head>
of your HTML file:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
Additional Animation Effects
You can add more animation effects such as fading or sliding by modifying the CSS transition
properties. For example, to add a fading effect:
.search-input {
transition: width 0.5s ease, opacity 0.3s ease;
}
Conclusion
This tutorial shows how to create an animated search form that expands when the user clicks on a search icon and collapses when they click outside the form. By combining CSS transitions and a little JavaScript, you can create a smooth and interactive user experience. You can further customize the appearance and behavior of the search form to match your website's design.
Comments
Post a Comment
Leave Comment