Vextor-ltd
@Vextor-ltd
Webdeveloper

GSAP. Как изменять zIndex на определённых точках Path?

Всем привет. Собственно говоря, задача такая. Есть горизонтальный текст, который будет огибать некий объект по скроллу.

Получается, что на крайних нижних точках zIndex перемещающегося элемента будет равен -1, а на верхних точка он наоборот становится больше зединдекса текста.

6203d0a259ba2683269639.png

Как решить эту задачу?

Плагины:
https://greensock.com/scrolltrigger/
https://greensock.com/motionpath/

Спасибо.
  • Вопрос задан
  • 195 просмотров
Пригласить эксперта
Ответы на вопрос 3
profesor08
@profesor08 Куратор тега CSS
Никак, установи заранее z-index для букв, обернув каждую в свой тег.
Ответ написан
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Можно продублировать SVG и "верхнюю" копию частично скрыть маской. Это не самое универсальное решение, но в контексте задачи может быть самым простым и надежным, т.к. не будет никакой привязки к контенту, только к структуре кривой:
Ответ написан
GSAP. Как изменять zIndex на определённых точках Path?
Всем привет. Собственно говоря, задача такая. Есть горизонтальный текст, который будет огибать некий объект по скроллу.

Получается, что на крайних нижних точках zIndex перемещающегося элемента будет равен -1, а на верхних точка он наоборот становится больше зединдекса текста.


либо js
либо использовать под себя известные библиотеки
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы