В качестве улучшения UX/UI я часто сижу и думаю, что можно было бы улучшить в приложении, чтобы пользователю было чуточку веселее пользоваться им.
Как-то раз я заметил интересную анимацию placeholder'a в нативном Desktop приложении Telegram. Подумал, что будет интересным способом использовать такое и в своих проектах.
Сразу понял, что у HTML нет своего API для этого и надо было использовать JavaScript-хаки. Но слишком много хаков мне хотелось использовать, т.к. код должен быть легко портируем и, желательно, вообще не затрагивать готовую разметку на проектах, которые уже в продакшене.
С использованием CSS attr property и CSS content получился примерно вот такой концепт:
И немного jQuery:
Из плюсов:
Из минусов:
Демка на CodePen
GitHub
P.S. Получился недотуториал, конечно, какой-то концепт скорее всего; коротко и прочее, но на мой взгляд стоит внимания.
Как-то раз я заметил интересную анимацию 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. Получился недотуториал, конечно, какой-то концепт скорее всего; коротко и прочее, но на мой взгляд стоит внимания.