dhat
@dhat

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

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

В принципе, немного понятно порывшись в коде, но все же так трудновато, хотелось бы структурированный мануал.
  • Вопрос задан
  • 786 просмотров
Решения вопроса 1
IonDen
@IonDen Куратор тега CSS
JavaScript developer. IonDen.com
Такая анимация делается вручную. Например с помощью CSS animation keyframes, где можно по шагам расписать анимацию элемента (что то вроде, повернуть на 25 градусов потом сдвинуть влево на 10 пикселей и т.п.)

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

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

P.S. И самое главное то забыл!
Чтобы анимация смотрелась отлично и естественно, используйте те приемы, что придумал еще Disney)
Вот отличная статья на хабре: https://habrahabr.ru/post/222225/
Вики: 12 принципов анимации
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@skazi_premiere
Верстаем как умеем ;) HTML/CSS/JS
Есть идея, делаете ее решение. Там сложно мало, делаете состояние 1 и потом состояние 2 на разные классы, и через скрипт обрабатываете клик на меню, первый клик +2 класс, второй -2 класс. Все гуглиться по JQuery на раз.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы