Как сверстать любой анимированный интерфейс для сайта разработанный на flinto?

Question

[Sam Fises]

Здравствуйте очень прошу объясните мне как сверстать любой анимированный интерфейс для сайта разработанный на flinto ?(анимированные кнопки, анимированное меню итд итп) на пример я разработал анимацию на flinto но не нашел в ней экспорта с кодом как вообще верстают такие классные анимации для интерфесов ?
пример gif анимация строки поиска

Comments

[riot26]

Перезалей гифку на https://habrastorage.org

[Sam Fises]

riot26,

Answer 1

[Rustam Bainazarov]

Эм, ну как — как? Чтобы сверстать некий «любой анимированный элемент» нужно его… сверстать.

Да-да, вы не ослушались, его нужно сверстать — т. е. воспользоваться HTML, CSS, JS и, если нужно, canvas.

Ну а рассказывать обо всём диапазоне технологий и их практическом применении, во-первых, никто не сможет, а во-вторых, никто не будет. У вас слишком общий вопрос.

Comments

[Sam Fises]

Нет я не прощу обьяснить все детально а просто помочь советом ссылкой на ресурс по даному вопросу или видеокурс или видеоурок

[Rustam Bainazarov]

Sam Fises, как такового курса не найдёте, так как вам надо знать CSS и HTML, как минимум. Большинство анимаций основаны на CSS-свойствах, но не все, более сложные анимации и взаимодействия делаются на JS и SVG (к примеру, GSAP) как дополнение к CSS.

В вашем случае вам можно сделать с помощью тупой смены значение свойств элементов по смене класса через JS. Почему JS: класс должен меняться не только при наведении (hover), но и оставаться в случае активного (focus) поля ввода и если в поле есть данные.

Иными словами, курсом «как работают transition и keyframes в CSS» вам не обойтись.

[Sam Fises]

SmthTo, спасибо за ответ буду знать я сейчас углубляю знания в css и js

Answer 2

[Froggyweb]

https://daneden.github.io/animate.css/
https://greensock.com/gsap
и т.д.

Comments

[Sam Fises]

спасибо огромгое а может посоветуете видеоуроки по даной проблемы?