tgoop.com/mefody_dev/351
Last Update:
Оно следит за тобой. На математических функциях CSS
Готовлю на CodeFest доклад про математику в CSS, собираю демки. Очень понравилось верстать глаз, который следит за курсором. Причём получилось сделать довольно быстро, а эффект залипательный.
Механика простая. Есть JavaScript, который на движение курсора устанавливает на DOM-узел переменные с координатами центра глаза и координатами курсора. Дальше в CSS считается угол от оси X к курсору и удалённость курсора от центра. Эти параметры передаются в набор `transform`-функций. Получаем на выходе забавный эффект, когда интерфейс за тобой следит.
Раньше делал такое же при помощи JavaScript, но было сложно синхронизировать все мелкие детали между собой: всё равно нужно было записывать прямо в атрибут style переменные или целые CSS-свойства, но не в один DOM-элемент, а в много разных. Причём с псевдоэлементами всегда есть нюансики. А тут довольно просто получилось: в один атрибут всё записал — и красота.
Заодно дотюнил демку, чтобы на смартфонах тоже можно было подвигать пальцем по экрану и позалипать: touch-action: none, который в обычной жизни лучше не использовать из-за проблем с доступностью, а тут можно.
https://codepen.io/dark_mefody/pen/yyyrQgV
BY mefody.dev
Share with your friend now:
tgoop.com/mefody_dev/351