Pull to refresh

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

Reading time 2 min
Views 11K
В качестве улучшения 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('<label class="placeholder" data-placeholder="' + this.placeholder + '">').attr('placeholder', '');
    	}).on('keyup', function () {
    	    $(this).parent().toggleClass('hidden', this.value !== '');
    	});
    }

    placeholderAnimation();
});



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


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


Демка на CodePen
GitHub

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

Articles