a
Пришлось долго разбираться как перспективу выставлять и сдвиги относительно считать - я не оч шарю в этом. Мб есть какой-то получше алгоритм, но и так вышло норм, кажется
Size: a a a
2020 July 09
VK
интересно такое на css получится сделать?)
Нет
a
интересно такое на css получится сделать?)
css на мышку не умеет реагировать никак
a
Но строго говоря там и сделано на css все - трансформы же
ВК
интересно такое на css получится сделать?)
сгенерить 100500 пустых дивов в кнопке и каждому свою анимашку
VK
Но строго говоря там и сделано на css все - трансформы же
Ну, трансформы - это просто отображение того, что обработанопосчитано скриптом же)
a
Ну, трансформы - это просто отображение того, что обработанопосчитано скриптом же)
Ну без трансформов перспективу никак не сделать, программно не сэмулировать (я не прикидываю как можно было бы)
a
Вот такую штуку недавно сделал, оч радует.
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Что бы тенюшки были френдли на элемент еще вешаю
box-shadow: var(--white) 0 0 0 0;
transition: box-shadow 250ms, transform 250ms;
&:hover {
box-shadow: var(--black5) 0 0 2em -1em;
transition: box-shadow 250ms;
}
O
Вот такую штуку недавно сделал, оч радует.
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Круто 👍🏻
там только 3d-трансформации?
я просто видал, что для ripple эффекта например в MUI даже теорема пифагора используется 😁
upd: а, блин, там же код
там только 3d-трансформации?
я просто видал, что для ripple эффекта например в MUI даже теорема пифагора используется 😁
upd: а, блин, там же код
DS
Вот такую штуку недавно сделал, оч радует.
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
лайкосик
VK
Вот такую штуку недавно сделал, оч радует.
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
А как оно на мобилах, кстати?)
a
А как оно на мобилах, кстати?)
Скорее никак, там нет маус евентов. Хотя если постараться (через зажатие тача) можно сдвинуть анимацию
DS
Кароче теперь от тебя не отстанут пока демку не запилишь) гив ми е код)
a
Кароче теперь от тебя не отстанут пока демку не запилишь) гив ми е код)
Та скопипасть хук и закинуть в любой свой компонент
a
Для большего эффекта в настройки можно передать
ratio: 0.2DS
Та скопипасть хук и закинуть в любой свой компонент
торвальдс злится)
O
Вот такую штуку недавно сделал, оч радует.
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
на add/remove событий наверное лучше коллбек передавать как unknown, а не any
AP
Для большего эффекта в настройки можно передать
ratio: 0.2подскажи, у тебя обработчики называются с приставки
on, к примеру onMouseLeave. А почему не handleMouseLeave?DS
Вот такую штуку недавно сделал, оч радует.
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
Вот код: https://gist.github.com/artalar/88557a678ae0ec6d45d75f52820127e7
а тю тут гист был🙈🙈😅😅
a
Oil Field
на add/remove событий наверное лучше коллбек передавать как unknown, а не any
Там типы норм вроде,я не стал разбираться на что ТС ругается, времени не было