Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Animating Placeholder

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 182
    Comment on it

    Making Animated Placeholder

    To make a Placeholder animation we need to make custom placeholder, for this I have used span tag.

    HTML -

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                .input_field{
                    position: relative;
                }
                .input_field input[type="text"]{
                    padding: 10px;
                    background: rgba(0,0,0,0.4);
                    width: 50%;
                    border: none;
                }
                .input_field span.placeholder.remove{
                    transform:translateY(-90%);
                    opacity: 0;
                }
                .input_field span.placeholder{
                    display: inline-block;
                    position: absolute;
                    top: 0;
                    left: 0;
                    color: #fff;
                    padding: 7px 9px;
                    opacity: 1;
                    transition:all 0.7s ease-in-out 0s;
                }
            </style>
            <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
            <script>
                $(function(){
                    $('.input_field input[type="text"]').focus(function(){
                        $('.input_field span.placeholder').addClass('remove');
                    });
                    $('.input_field input[type="text"]').focusout(function(){
                        $('.input_field span.placeholder').removeClass('remove');
                    });
                });
            </script>
        </head>
        <body>
            <div class="input_field">
                <span class="placeholder">Email</span>
                <input type="text">
            </div>      
        </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: