#статья дня
Не так давно по многим ресурсам катком прошлась статья про использование тригонометрии в вёрстке: https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/
А точнее, там целый цикл, ссылки внутри.
Но они не применили ничего из этого в CSS-анимациях, хоть и привели пример на canvas. Так что пришло время расчехлить наше всё.
Вашему вниманию предлагается… прыгающая коробочка: https://codepen.io/alinaki/pen/GbxrwO
Если вы ездили поездами РЖД, она может быть вам знакома по их Wi-Fi порталу. Но там-то просто гифка, а тут — магия SCSS.
Я решил не использовать библиотеку math для SCSS и реализовал тригонометрические функции по известным алгоритмам, SCSS вполне себе позволяет такое.
Крайне рекомендую посмотреть скомпилированный CSS чтобы понять изначальный принцип.
Итого, «физически правильно» прыгаем по косинусу и пружиним по синусу :)
Школьная тригонометрия вам о таком использовании не рассказывала, уверен.
#css #trigonometry #animation
