How we can create a floating label animation using HTML CSS JavaScript? Solution: See this jQuery Floating Label Animation With CSS. Form Input Label Float.
Previously I have shared input label animation, but it has a floating effect. Most of the forms on websites have any type of animation effect, nowadays floating effect is on-trend. Basically, floating label animation is a type of placeholder which shifts top of the input and pretends like the label.
Today you will learn to create an input label which floats above the input fields. Basically, there is a placeholder middle of the input but when you will click on that or it will active then the placeholder will shift to the top of the input. The transition when the placeholder becomes label is a type of floating.
So, Today I am sharing jQuery Floating Label Animation With CSS. I am putting this post in JavaScript category because jQuery is a JS library. The transition of the label is a kind of wave animation, that’s creating this different from others. I think this program will be very useful for you, because we use forms in multiple places.
If you are thinking now how this animation actually is, then see the preview given below.
Preview Of Form Input Label Float
See this video preview to getting an idea of how this floating label looks like.
Now you can see it visually, you also can see live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- CSS Text Shimmer Effect
- Loop Slideshow With Controls
- Sliding Navigation Buttons
- CSS Circular Menu With Icons
jQuery Floating Label Animation With CSS Source Code
Before sharing source code, let’s talk about it. First I have created a form using HTML <form> tag, and placed 3 inputs and labels inside it. You can place much quantity of inputs according to your need. Inside the input, I have placed a unique ID name and inside the label placed that ID in for section.
Now using CSS I have placed all the elements in the right place. I have managed all the styling with CSS like font, margin, padding, width, height, etc. I have used a google font and put inside the CSS file using @import (info). Also, this design is responsive for creating that, I have used the CSS @media query.
jQuery handling the main function, Using jQuery I have put conditions for animating the label. When you click or active any input jQuery shift the label on top with a wave animation. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files, first for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Float Labels | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <main> <h1>Floating Labels From</h1> <form class="flp"> <div> <input type="text" id="fname" /> <label for="fname">First Name</label> </div> <div> <input type="text" id="lname" /> <label for="lname">Last Name</label> </div> <div> <input type="text" id="email" /> <label for="email">Email</label> </div> </form> </main> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { padding-top: 100px; background:#e8eaed; font-family: 'Josefin Sans', sans-serif; } main { max-width: 500px; margin: 0 auto; padding-bottom: 10px; background: white; border-radius: 3px; overflow: hidden; } h1 { font-size: 24px; font-weight: normal; background: #ff3a3a; color: white; text-align: center; padding: 20px 0; margin-bottom: 40px; } .flp { padding: 0 50px; } .flp div { position: relative; margin-bottom: 30px;} .flp input, .flp label { width: 400px; display: block; font: inherit; font-size: 16px; line-height: 24px; height: 46px; border: 1px solid #999; } .flp input { padding: 10px; outline: none; border-radius: 3px; } .flp label { position: absolute; left: 0; top: 0; padding: 10px 8px; border-color: transparent; color: #666; cursor: text; } .ch { display: block; float: left; position: relative; background: white; } .ch:first-child {padding-left: 2px;} .ch:last-child {padding-right: 2px;} .focussed { pointer-events: none; } @media (max-width: 765px) { .flp { padding: 0 15px; } .flp input, .flp label { width: 100%; } } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(".flp label").each(function(){ var sop = '<span class="ch">'; var scl = '</span>'; $(this).html(sop + $(this).html().split("").join(scl+sop) + scl); $(".ch:contains(' ')").html(" "); }) var d; $(".flp input").focus(function(){ var tm = $(this).outerHeight()/2 *-1 + "px"; $(this).next().addClass("focussed").children().stop(true).each(function(i){ d = i*50; $(this).delay(d).animate({top: tm}, 200, 'easeOutBack'); }) }) $(".flp input").blur(function(){ if($(this).val() == "") { $(this).next().removeClass("focussed").children().stop(true).each(function(i){ d = i*50; $(this).delay(d).animate({top: 0}, 500, 'easeInOutBack'); }) } }) |
That’s It. Now you have successfully created jQuery Floating Label Animation With CSS, Form Input Label Float. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
