В качестве улучшения 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. Получился недотуториал, конечно, какой-то концепт скорее всего; коротко и прочее, но на мой взгляд стоит внимания.
Комментарии (9)
rinat_crone
26.08.2015 22:07+1Свежий Сафари на Маке – никакой анимации не вижу, к сожалению.
knitevision1
26.08.2015 22:13Хм. Это 9 сафари и El Captain? Чекнул в browserstack, всё ок. Там по-моему нечему ломаться, кроме флексбокса, и, может быть attr в css.
rinat_crone
26.08.2015 22:15+28.0.8 на Yosemite. Мне смысла Вас обманывать нет никакого, анимации действительно нет :)
SerDIDG
27.08.2015 02:56Всё куда проще — caniuse.com/#feat=transforms2d, в 8 сафари трансформ с префиксом работает ещё.
PS. Так же нет анимации на Safari 8.0.8.
orcy
27.08.2015 08:49+3Не хватает гифки вначале чтобы понимать чего же хочется достичь, для тех кто никогда не видел Telegram.
PaulZi
27.08.2015 10:14Мне больше нравится такой подход: codepen.io/anon/pen/xwKORw
Когда подпись при вводе не исчезает, а смещается наверх. То есть остаётся понятным что это за поле, даже когда оно заполнено.
middle
Симпатично. Но атрибут
data-placeholderлучше устанавливать через метод.data, а не в HTML-коде. Что, еслиthis.placeholderсодержит всякие нехорошие символы?