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

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 294
    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 -

    1. <!doctype html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="utf-8">
    5. <title></title>
    6. <style>
    7. .input_field{
    8. position: relative;
    9. }
    10. .input_field input[type="text"]{
    11. padding: 10px;
    12. background: rgba(0,0,0,0.4);
    13. width: 50%;
    14. border: none;
    15. }
    16. .input_field span.placeholder.remove{
    17. transform:translateY(-90%);
    18. opacity: 0;
    19. }
    20. .input_field span.placeholder{
    21. display: inline-block;
    22. position: absolute;
    23. top: 0;
    24. left: 0;
    25. color: #fff;
    26. padding: 7px 9px;
    27. opacity: 1;
    28. transition:all 0.7s ease-in-out 0s;
    29. }
    30. </style>
    31. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    32. <script>
    33. $(function(){
    34. $('.input_field input[type="text"]').focus(function(){
    35. $('.input_field span.placeholder').addClass('remove');
    36. });
    37. $('.input_field input[type="text"]').focusout(function(){
    38. $('.input_field span.placeholder').removeClass('remove');
    39. });
    40. });
    41. </script>
    42. </head>
    43. <body>
    44. <div class="input_field">
    45. <span class="placeholder">Email</span>
    46. <input type="text">
    47. </div>
    48. </body>
    49. </html>

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: