Animated Input Placeholder Icons with HTML and CSS @rayen-code

Rayen

Delve into the realm of interactive forms with our tutorial on creating Animated Input Placeholder Icons using only HTML and CSS. This feature adds a dynamic touch to your forms, improving user experience and engagement.




Step 1: HTML Markup:

Start by structuring your HTML to include input fields with placeholder icons. Define the input elements and use CSS classes to apply animation effects to placeholder icons, creating a visually appealing form design. 
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input: Placeholder Animation</title>

    <!-- icon font awesome  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
        integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- style css file  -->
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="input-area">
        <input type="text" placeholder="What do you want to search?">
        <div class="icons">
            <div><i class="fa-solid fa-wand-magic-sparkles"></i></div>
            <div><i class="fa-solid fa-hat-wizard"></i></div>
            <div><i class="fa-solid fa-hand-sparkles"></i></div>
            <div><i class="fa-solid fa-wand-magic-sparkles"></i></div>
        </div>
        <button><i class="fa-solid fa-magnifying-glass"></i></button>
    </div>
</body>

</html>

Step 2: Styling with CSS:

Enhance the appearance and behavior of your input placeholder icons with CSS styles. Implement keyframe animations, transitions, and hover effects to create captivating and user-friendly form interactions.
/*-------------------- CSS --------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #b06ab3, #4568dc);
}

.input-area {
    position: relative;
    height: 60px;
    width: 400px;
    background: white;
    border-radius: 10px;
    display: flex;
    overflow: hidden;
}

.input-area input {
    flex: 1;
    outline: none;
    border: 0;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 1rem;
}

.input-area input:not(:placeholder-shown)+.icons {
    display: none;
}

.input-area button {
    background: transparent;
    font-size: 1.1rem;
    outline: none;
    border: 0;
    padding: 20px;
    cursor: pointer;
    color: red;
}

.input-area .icons {
    position: absolute;
    top: 0;
    left: 230px;
    pointer-events: none;
    animation: slide 6s linear infinite;
}

.input-area .icons div {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: red;
}

@keyframes slide {
    0% {
        transform: translateY(0px);
    }

    5% {
        transform: translateY(-60px);
    }

    30% {
        transform: translateY(-60px);
    }

    35% {
        transform: translateY(-120px);
    }

    65% {
        transform: translateY(-120px);
    }

    70% {
        transform: translateY(-180px);
    }

    100% {
        transform: translateY(-180px);
    }
}

Animated Input Placeholder Icons elevate the visual appeal and usability of your forms, making the input process more engaging for users. With simple HTML and CSS techniques, you can create interactive form elements and enhance overall user experience.


0 Comments