исчезающий текстовый эффект на фиксированном фоне

Question

Мне интересно, как создать исчезающий текстовый эффект, как текст «НАЗНАЧЕНИЯ» на этом site. Я знаю, как создать фиксированный фоновый эффект от

background-attachment: fixed; 
background-repeat: no-repeat; 

, но я не знаю, какое должно быть добавлено к тексту свойства. Как я вижу, текст должен иметь position: absolute;, но это не дает мне эффекта, как на этом сайте, когда мы прокручиваем и текст исчезает.

Answer 1

текст, очевидно, имеет position: fixed, которая фиксирует его положение по отношению к иллюминатору/окна, а не по отношению к любому другому элементу HTML.

Чтобы сделать его охваченным прокручивающими элементами, самый простой способ - дать ему отрицательное значение индекса z, например z-index: -1; Таким образом, он будет покрыт другими элементами, которые вообще не имеют индекса z.

Элемент с изображением за этим текстом нуждается в еще большем отрицательном z-индексе, чтобы оставаться под ним. И это, очевидно, также имеет position: fixed.

(Все это, не глядя на код, может немного отличаться, но это самый распространенный способ, чтобы сделать эту работу таким образом)