W js jeszcze się nawet nie bawiłem a chyba tylko tutaj da się coś naskrobać. Załóżmy, że na środku strony mamy koło w tle, tło jest nieruchome. Chciałbym aby tekst zmieniał kolor jak znajdzie się w kółku, tzn zależnie od przewijania paska. Problemem jest, że cały tekst znajdzie się w jednym divie, będzie jednolity( w sensie bez pogrubień, podkreśleń, ten sam rozmiar). Dodatkowym problemem jest jego dynamiczność, nie zawsze to samo. Liczenie znaków chyba też odpada, jeśli zostanie zbliżony bądź oddalony widok. Szukam porady jak to osiągnąć i jakimi tematami się zainteresować, liczę na linki.
0
0
Może dałoby się przez CSS blend mode, albo clip path.
1
Może moje rozwiązanie trochę Cię naprowadzi. W moim przykładzie jako tło ustawiłem okrągły gradient, ale możesz ustawić dowolny obrazek. Tło jest przypięte (fixed), więc nie scrolluje razem z tekstem. Właściwość -webkit-background-clip: text; sprawia, że tylko tekst ma tło.
Działa tylko w przeglądarce Google Chrome: https://jsfiddle.net/zjx6eknq/
body > div {
background-color: white;
color: transparent;
font-size: 20px;
font-weight: bold;
}
body > div > div {
background-attachment: fixed;
background-image: radial-gradient(red, orange, yellow, green, blue, violet);
-webkit-background-clip: text;
}
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Burmistrz">
</head>
<body>
<div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</body>
</html>
0
Dziękuję panowie. Po pracy przejrzę tropy :)