Можно ли реализовать такую анимацию в веб проекте на html5 и CSS?

Question

[istasiik]

Нужно реализовать анимацию с поднимающимися мелкими надписями. dribbble.s3.amazonaws.com/users/6410/screenshots/1...

На чем проще всего это сделать? Подойдет ли html и css?

Answer 1

[Xakephp]

habrahabr.ru/post/216669
codepen.io/chriscoyier/pen/CiflJ

Comments

[istasiik]

Спасибо!

Answer 2

[Денис Евра]

Тоже вставлю свои пять копеек: thecodeplayer.com/walkthrough/animating-float-labe...

Answer 3

[slogger1994]

Еще есть такая штука https://github.com/fians/Waves

Answer 4

[istasiik]

Вот решение: https://github.com/maman/JVFloat.js/tree/master

Answer 5

[evgeny_ryabcev]

Вот, пожалуйста))

Answer 6

[Anton_Gorodezkiy]

Мне вспомнился sliding labels, хотя и немного другой подход www.csskarma.com/blog/sliding-labels-plugin

Answer 7

[SHAKIRA]

Это элементарно. Создайте классы для лэйбла с активным и не аутивным инпутом. По том при помощи Jquery меняйте классы. Затухание и прочее тоже есть в jquery

Comments

[istasiik]

То есть, сделать поля для ввода через инпут без рамки, по клику на инпут включать анимацию верхней надписи (подъем и изменение прозрачности)?

[Андрей Ежгуров]

Не по клику, а по вводу символа - всплывать должно, когда значение input содержит хотя бы один символ.

Answer 8

[Alexander Karpov]

jqueryui.com/tooltip делов то

Comments

[Xakephp]

я не уверен что это то, что он попросил :D

Answer 9

[Вячеслав]

думаю да. Использовать @keyframes для появления текста(анимировать ширину). А для мерцания, которое имитирует тач - также использовать @keyframes на ::before. Не пробовал, но думаю реально.