Skip to content

Commit 1d4438b

Browse files
AtlasNexusTechAtlasNexusTech
committed
fix: animate property facts with text color only
1 parent 129fac8 commit 1d4438b

4 files changed

Lines changed: 49 additions & 48 deletions

File tree

‎demo-seydi-animee/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<link rel="canonical" href="https://atlasnexus.tech/demo-seydi-animee/">
1212
<link rel="icon" type="image/png" href="/favicon.png">
1313
<link rel="stylesheet" href="../demo-seydi/styles.css?v=1">
14-
<link rel="stylesheet" href="motion.css?v=2">
14+
<link rel="stylesheet" href="motion.css?v=3">
1515
</head>
1616
<body class="motion-page">
1717
<div class="motion-progress" aria-hidden="true"><span></span></div>

‎demo-seydi-animee/motion.css‎

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -184,22 +184,16 @@
184184
transform: scale(1.1) translate3d(0, var(--parallax-y, 0px), 0);
185185
}
186186
.motion-page .facts strong {
187-
color: var(--navy);
188-
background: linear-gradient(110deg, var(--navy) 25%, #8a6324 48%, var(--navy) 72%);
189-
background-size: 250% 100%;
187+
--fact-color-start: var(--navy);
188+
--fact-color-mid: #8a6324;
189+
--fact-color-end: var(--navy);
190+
color: var(--fact-color-start);
190191
}
191192
.motion-page .property-dark .facts strong {
192-
color: #f4deb0;
193-
background: linear-gradient(110deg, #bd9b5d 0%, #d6ad62 42%, #f4deb0 72%, #bd9b5d 100%);
194-
background-size: 250% 100%;
195-
}
196-
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
197-
.motion-page .facts strong {
198-
color: transparent;
199-
-webkit-text-fill-color: transparent;
200-
background-clip: text;
201-
-webkit-background-clip: text;
202-
}
193+
--fact-color-start: #f4deb0;
194+
--fact-color-mid: #d6ad62;
195+
--fact-color-end: #bd9b5d;
196+
color: var(--fact-color-start);
203197
}
204198
.motion-page .facts.is-visible strong { animation: number-shine 1.6s .2s ease forwards; }
205199
.motion-page .gallery .photo-button::after {
@@ -260,8 +254,9 @@
260254
100% { opacity: 0; transform: translate(-50%,12px); }
261255
}
262256
@keyframes number-shine {
263-
from { background-position: 100% 0; }
264-
to { background-position: 0 0; }
257+
0% { color: var(--fact-color-start); }
258+
55% { color: var(--fact-color-mid); }
259+
100% { color: var(--fact-color-end); }
265260
}
266261
@keyframes monogram-pulse {
267262
0%,100% { box-shadow: inset 0 0 0 7px rgba(255,255,255,.08), 0 0 0 0 rgba(189,155,93,0); }
@@ -293,9 +288,7 @@
293288
transform: none !important;
294289
}
295290
.motion-page .facts strong {
296-
color: inherit;
297-
-webkit-text-fill-color: currentColor;
298-
background: none;
291+
color: var(--fact-color-end);
299292
animation: none !important;
300293
}
301294
.motion-page .advisor-monogram { animation: none !important; }

‎tests/test_demo_seydi_animated_contrast.py‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,47 @@
55
MOTION_CSS = ROOT / "demo-seydi-animee" / "motion.css"
66

77

8-
def test_animated_fact_gradient_never_fades_to_transparent():
9-
css = MOTION_CSS.read_text(encoding="utf-8")
8+
def css_rule(css: str, selector: str) -> str:
109
match = re.search(
11-
r"\.motion-page \.facts strong\s*\{(?P<body>.*?)\}",
10+
re.escape(selector) + r"\s*\{(?P<body>.*?)\}",
1211
css,
1312
flags=re.DOTALL,
1413
)
15-
assert match, "Règle animée des chiffres introuvable"
16-
rule = match.group("body")
14+
assert match, f"Règle CSS introuvable : {selector}"
15+
return match.group("body").lower()
16+
1717

18-
# currentColor becomes transparent when the same rule sets color: transparent.
19-
assert "currentColor" not in rule
20-
assert "var(--navy)" in rule
21-
assert "#8a6324" in rule.lower()
18+
def test_animated_facts_use_text_color_without_a_background():
19+
css = MOTION_CSS.read_text(encoding="utf-8")
20+
rule = css_rule(css, ".motion-page .facts strong")
2221

23-
# Text must remain readable when background-clip:text is unsupported.
24-
assert "@supports" in css
25-
assert ".motion-page .facts strong {\n color: var(--navy);" in css
26-
assert "-webkit-text-fill-color: transparent" in css
22+
assert "background" not in rule
23+
assert "transparent" not in rule
24+
assert "--fact-color-start" in rule
25+
assert "--fact-color-end" in rule
26+
assert "background-clip: text" not in css
27+
assert "text-fill-color: transparent" not in css
2728

2829

29-
def test_dark_property_fact_gradient_ends_in_gold():
30+
def test_dark_property_fact_animation_finishes_in_gold():
3031
css = MOTION_CSS.read_text(encoding="utf-8")
31-
match = re.search(
32-
r"\.motion-page \.property-dark \.facts strong\s*\{(?P<body>.*?)\}",
33-
css,
34-
flags=re.DOTALL,
35-
)
36-
assert match, "Variante dorée des chiffres sur fond sombre introuvable"
37-
rule = match.group("body").lower()
38-
39-
assert "var(--navy)" not in rule
40-
assert "#bd9b5d" in rule
41-
assert "#d6ad62" in rule
42-
assert "#f4deb0" in rule
43-
assert "-webkit-text-fill-color: currentColor" in css
32+
rule = css_rule(css, ".motion-page .property-dark .facts strong")
33+
keyframes = css.split("@keyframes number-shine", 1)[1].split(
34+
"@keyframes monogram-pulse", 1
35+
)[0].lower()
36+
37+
assert "background" not in rule
38+
assert "--fact-color-start: #f4deb0" in rule
39+
assert "--fact-color-mid: #d6ad62" in rule
40+
assert "--fact-color-end: #bd9b5d" in rule
41+
assert "color: var(--fact-color-end)" in keyframes
42+
43+
44+
def test_reduced_motion_displays_final_fact_color_directly():
45+
css = MOTION_CSS.read_text(encoding="utf-8")
46+
reduced_motion = css.split("@media (prefers-reduced-motion: reduce)", 1)[1]
47+
rule = css_rule(reduced_motion, ".motion-page .facts strong")
48+
49+
assert "color: var(--fact-color-end)" in rule
50+
assert "background" not in rule
51+
assert "animation: none" in rule

‎tests/test_demo_seydi_animee.py‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ def test_animated_demo_contract():
3939
if item.get("name", "").lower() == "robots"
4040
)
4141
assert {"noindex", "nofollow", "noarchive"}.issubset(set(robots.replace(",", " ").split()))
42-
assert "motion.css?v=2" in parser.links
42+
assert "motion.css?v=3" in parser.links
4343
assert "motion.js?v=1" in parser.scripts
4444
assert any("motion-page" in item.get("class", "") for item in parser.attrs)
4545
assert sum("property-photo" in img.get("class", "") for img in parser.images) == 21

0 commit comments

Comments
 (0)