Telegram-like анимированный placeholder для HTML-инпутов27.08.2015 07:18

вчера в 19:07

В качестве улучшения UX/UI я часто сижу и думаю, что можно было бы улучшить в приложении, чтобы пользователю было чуточку веселее пользоваться им.

Как-то раз я заметил интересную анимацию placeholder’a в нативном Desktop приложении Telegram. Подумал, что будет интересным способом использовать такое и в своих проектах.
Сразу понял, что у HTML нет своего API для этого и надо было использовать JavaScript-хаки. Но слишком много хаков мне хотелось использовать, т.к. код должен быть легко портируем и, желательно, вообще не затрагивать готовую разметку на проектах, которые уже в продакшене.

С использованием CSS attr property и CSS content получился примерно вот такой концепт:

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;
        }
    }
}


И немного jQuery:
jQuery 
$(document).ready(function() {
    function placeholderAnimation() {
        var $placeholder = $('input[placeholder]');

        $placeholder.each(function () {
            $(this).wrap('

Из плюсов:

  • Легко портируется на готовые проекты
  • CSS подбирает значения плейсхолдеров из HTML => не надо менять разметку
  • Всё контролируется CSS-анимациями, соотв. можно налепить всякие cubic-bezier’ы и играться.
  • Впишется в любые дизайны, в отличие от всяких там материальных инпутов, где всё прыгает и требует подходящего дизайна всего приложения.
  • Быстрый и простой способ сделать UX инпутов немного лучше и приятнее

Из минусов:

  • Из-за flexbox’a поддержка IE11+
  • Из-за лага в keyup событии, пришлось курсор и первую букву плейсхолдера разделить одной буквой, чтобы при вводе в инпут, плейсхолдер и значения ипута не накладывались друг на друга.

Демка на CodePen
GitHub

P.S. Получился недотуториал, конечно, какой-то концепт скорее всего; коротко и прочее, но на мой взгляд стоит внимания.

© Habrahabr.ru