Мануал как делать крутые анимированные сендвич меню?

Question

[dhat]

Облазил страниц 10 гугла но так и не нашел ничего внятного. Хочу научится делать такие штуки:
https://codepen.io/dhatt/pen/rrVwZX
https://codepen.io/dhatt/pen/LRRZVY

В принципе, немного понятно порывшись в коде, но все же так трудновато, хотелось бы структурированный мануал.

Answer 1

[Денис Инешин]

Такая анимация делается вручную. Например с помощью CSS animation keyframes, где можно по шагам расписать анимацию элемента (что то вроде, повернуть на 25 градусов потом сдвинуть влево на 10 пикселей и т.п.)

JS часть может быть минимальной, например пли клике навесить нужный класс, при повторном клике убрать его.

Возможности CSS анимации можно понять по библиотеке Animate.css. Поройтесь в коде, там все красиво, сразу видно как keyframes устроены.

P.S. И самое главное то забыл!
Чтобы анимация смотрелась отлично и естественно, используйте те приемы, что придумал еще Disney)
Вот отличная статья на хабре: https://habrahabr.ru/post/222225/
Вики: 12 принципов анимации

Comments

[dhat]

Спасибо, интересно и сложновато выглядит это все))

[Денис Инешин]

dhat: ну а как вы хотели, красивая и естественная анимация - тут нужно много практики.

[dhat]

Денис Инешин: на данном этапе хотелось бы модульное решение, библиотека с несколькими вариантами гамбургер-меню. На Codepen какая-то лапша (я так понял специально код авторы засирают) - https://codepen.io/dhatt/pen/rrVwZX
Ну вот как оттуда выдрать одно меню?))) И зачем там эта лапша в JS? Ужас.

[Денис Инешин]

dhat: на codepen это демка, код сжат специально, чтобы не тырили. На вашем месте я бы потратил пару дней и научился бы делать такую анимацию хотя бы на базовом уровне. Пригодится всегда.

Answer 2

[Алексей]

Есть идея, делаете ее решение. Там сложно мало, делаете состояние 1 и потом состояние 2 на разные классы, и через скрипт обрабатываете клик на меню, первый клик +2 класс, второй -2 класс. Все гуглиться по JQuery на раз.

Comments

[dhat]

Зачем jQuery? Классы менять? Я по возможности буду обходится без нее. Т.е. мне что нужно создать 2 состояния этой кнопки и нужную анимацию + в JS переключение классов по клику?

[Алексей]

dhat: ну все так делают :)