Как сделать эффект волны при наведении jquery?

Question

[Alexey10]

Ребят, всем привет))
Как мне сделать блок линию, при наведении она ведет себя как волна. Вот пример https://www.sibirix.ru/ ? .
Или логику работы напишите пожалуйста, то чет ничего в голову не лезет. Всем спасибо за помощь))

Answer 1

[Сергей delphinpro]

Генерим кучу элементов (на каждый штрих).
Отслеживаем мышь над компонентом.
По X-координате рассчитываем функцию синуса для двух периодов.
По Y-координате вносим небольшой коээффициент, чтобы высота волны реагировала на положение мыши по вертикали (опционально)
По этим значениям раскидываем близлежащим элементам стили трансформаций (translateY(computedValue))

Comments

[Alexey10]

Спасибо большое)) тяжолаватенько для моих знаний.