Telegram-like animated placeholder for HTML inputs
As an improvement to UX / UI, I often sit and think that it would be possible to improve in the application so that the user would be a little more fun to use it.
Once I noticed an interesting placeholder animation in the native Desktop application Telegram. I thought it would be an interesting way to use this in my projects.
Immediately I realized that HTML does not have its own API for this, and it was necessary to use JavaScript hacks. But I wanted to use too many hacks, because the code should be easy to port and, preferably, not to affect the markup on projects that are already in production.
With the use of CSS, attr property and CSS content has something like this concept:
')
And a bit of jQuery:
Of the benefits:
Of the minuses:
CodePen demo
Github
PS It turned out nedotutorial, of course, some kind of concept is likely; short and stuff, but in my opinion worth attention.
Once I noticed an interesting placeholder animation in the native Desktop application Telegram. I thought it would be an interesting way to use this in my projects.
Immediately I realized that HTML does not have its own API for this, and it was necessary to use JavaScript hacks. But I wanted to use too many hacks, because the code should be easy to port and, preferably, not to affect the markup on projects that are already in production.
With the use of CSS, attr property and CSS content has something like this concept:
')
SCSS
label.placeholder { position: relative; &:after { display: flex; align-items: center; content: attr(data-placeholder); position: absolute; top:0; right: 0; bottom: 0; left: $after-left; font-size: 14px; color: grey; cursor: text; transition: transform $tf-duration $tf, opacity $tf-duration $tf; transform: translateX(0); opacity: 1; color: $input-default-color; } &.hidden { &:after { transform: translateX(40%); opacity: 0; } } } And a bit of jQuery:
jQuery
$(document).ready(function() { function placeholderAnimation() { var $placeholder = $('input[placeholder]'); $placeholder.each(function () { $(this).wrap('<label class="placeholder" data-placeholder="' + this.placeholder + '">').attr('placeholder', ''); }).on('keyup', function () { $(this).parent().toggleClass('hidden', this.value !== ''); }); } placeholderAnimation(); }); Of the benefits:
- Easy to port to finished projects.
- CSS selects placeholder values from HTML => no need to change markup
- Everything is controlled by CSS-animations, respectively. You can stick all kinds of cubic-beziers and play.
- It will fit into any designs, unlike any material input there, where everything jumps and requires a suitable design of the entire application.
- A quick and easy way to make your UX inputs a little better and more enjoyable.
Of the minuses:
- Due to flexbox support for IE11 +
- Because of the lag in the keyup event, I had to split the cursor and the first placeholder letter in one letter so that when entered into the input, the placeholder and the iputa values do not overlap each other.
CodePen demo
Github
PS It turned out nedotutorial, of course, some kind of concept is likely; short and stuff, but in my opinion worth attention.
Source: https://habr.com/ru/post/265497/
All Articles