Text Color selon Background

**Danyel** · 22/03/2024, 21h59

Salut all,

Est-il possible, pour un marquee html, d'automatiquement changer la couleur du texte SELON la position du texte et la couleur du background (du meme marquee) ?
Pour être plus concret :
On a un marquee avec un background en linear-gradient horizontal de blanc à noir par exemple.
Et selon ou se trouve le texte dans le marquee, la couleur se met en texte blanc quand le background est noir, et en texte noir quand le background est blanc.
(j'y crois pas une seconde, mais sait-on jamais

)

Merci pour vos retours.

**ASCIIDEFOND** · 23/03/2024, 13h13

Salut Danyel,

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            background-color: #ffffff;
            width: 800px;
            height: 100px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            animation: background-text 5s ease-in-out infinite alternate;
            padding: 0 165px;
        }
 
        .container p {
            position: absolute;
            width: inherit;
            margin: 0;
            font-size: 5em;
            text-align: center;
            transform: translateX(50%);
            animation: color-text 5s ease-in-out infinite alternate;
        }
 
        @keyframes background-text {
            0% {
                background-color: rgb(255, 255, 255);
            }
            100% {
                background-color: rgb(0, 0, 0);
            }
        }
 
        @keyframes color-text {
            0% {
                transform: translateX(50%);
                color: rgb(0, 0, 0);
            }
            100% {
                transform: translateX(-50%);
                color: rgb(255, 255, 255);
            }
        }
    </style>
</head>
 
<body>
    <div class="container">
        <p>Mon texte</p>
    </div>
</body>
 
</html>

**Danyel** · 23/03/2024, 17h57

Whaooo merci ASCIIDEFOND c'est super mais ca ne corresponds pas tout a fait avec mon souhait.
Moi, mon background est fixe en degrade et dans l'ideal il faudrait un check du background pour definir la couleur du texte. (même si ton code est modifiable et pourrait aller)
Le probleme que je vois arriver, c'est si le texte est plutot long (meme total en longueur) et comment est defini la position du texte dans le div ...

**ASCIIDEFOND** · 24/03/2024, 10h34

L'idée est un peu ça ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            background: linear-gradient(90deg, rgba(11, 11, 11, 0.9850140739889706) 0%, rgb(127, 127, 127) 40%, rgb(201, 201, 201) 70%, rgba(255, 255, 255, 1) 100%);
            width: 100%;
            height: 80px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            font-size: 4em;
            border: 1px solid red;
        }
 
        .marqueeA {
            margin: 0 auto;
            white-space: nowrap;
            overflow: hidden;
            position: absolute;
        }
 
        .marqueeA span {
            display: inline-block;
            padding-left: 50%;
            animation: marquee-text 15s linear infinite;
        }
 
        @keyframes marquee-text {
            0% {
                transform: translate(0, 0);
                color: rgb(0, 0, 0);
            }
 
            40% {
                color: rgb(160, 160, 160);
            }
 
            70% {
                color: rgb(214, 211, 211);
            }
 
            100% {
                transform: translate(-100%, 0);
                color: rgb(242, 242, 242);
            }
        }
    </style>
 
</head>
 
<body>
    <div class="container">
        <p class="marqueeA">
            <span>&nbsp;La nature est tout ce qu’on voit, tout ce qu’on veut, tout ce qu’on aime. Tout ce qu’on sait,
                tout ce
                qu’on croit, tout ce que l’on sent en soi-même...</span>
        </p>
    </div>
</body>
 
</html>

**Danyel** · 24/03/2024, 16h46

Oui c'est aussi un peu ce que j'avais fait apres ton premier code, mais selon le/les cas, ce n'est pas viable.
Je pense que pour faire selon mes desirs, il faudrait une usine a gaz en js qui controle le background de chaque mots du texte et reagit en consequence ...
En tout cas merci pour tout.

Text Color selon Background

CSS

Discussions similaires

Partager

Partager