Все спасибо за ваши советы! Я им и последовал. Для эффекта сжатия и следования за курсором использовал библиотеку gsap. Задачу разбил на мелкие подзадачи и постепенно спустя ~ 3 дня удалось добиться нужного эффекта. В качестве слайдера использовал 'keen-slider' у него удобный automove мод есть.
Refguser, Тема своя, jquery нигде не используется, он и не нужен был нигде на сайте. Лишь плагины антиспама его требуют. Поэтому и сделал специально для них свой jquery
Refguser, Протестил плагин, показатели pagespeed стали лучше, но он завязан на jquery и пихает его в head, что опять же добавляет TBT , причем попытки самостоятельно подгрузить jquery приводят к сбою в работе плагина. Может есть какой нибудь аналог без jquery?
Иван Филипов, я в описании задачи упомянул данный способ, он к сожалению не подходит. Ломает визуально высоту строки. В итоге формула и текст находятся на разных уровнях. Да и на мобильных устройствах может быть не очевидно что формулу нужно еще и проскролить
Максим, Так я имел ввиду только те тестовые 2 ячейки которые я уже предоставил на codepen , остальные я бы по аналогии переделал. Сами ячейки уже предоставлены вопрос только во внутреннем содержимом
Максим, я поправил свой codepen , добавил туда одну из ячеек, где под замену картинка и текст. Допустим svg можно через use вставить, но каким образом мне сделать под замену текст, и так чтобы все легко позиционировалось? Я откапал foreignObject , только потому что он четко решает поставленную задачу, относительное позиционирование внутри svg с привычным мне display grid.
Можете привести пример codepen как это бы сделали вы?
Максим, Это лишь часть объекта, остальное я вырезал, в целях экономии времени. Почему я поместил в foreignObject , потому что стояла задача сделать возможным менять картинку и текст через админку.
Вот так выглядит полный объект. В нем под замену должны попадать картинки и текст.
Vladislav, Да, видимо без js не обойтись. На сайте я использовал simplebar. Он просто мне ломал верстку определенным образом, надеялся обойтись без js.
