This might be a pretty specific question.
I have this running text marquee animation. On hover the animation pauses and shows a gradient as “text color”. The mouse is being tracked to pin the black gradient center to the mouse movement.
Goal:
The gradient on the text should span across the whole width. Images inside of the text should not be effected. The center of the gradient should always be the black color. The gradient should ideally be on the level of .marquee (wrapper) to not be effected by the animation. (.marqueeConetent is being animated)
Challenge:
Different stacking contexts are created therefore it is hard to place the images above a gradient overlay. Because of the text animation the content gets duplicated and replaced at some point -> leads to anomalies with the gradient not hitting every text block.
What I tried:
mix-blend-mode overlay approach – hard to overcome different stacking contexts therefore the images are always effected.
background-clip text approach – either the gradient center changes or the effect is applied to each text block individually.
Is there any way to achieve what I am looking for? Is there any way to prevent images in a lower stacking context to be effected by an overlay with mix-blend-mode in a higher stacking context?
const marquees = document.querySelectorAll(".marquee");
// If recuded motion isn't activated we add the animation
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
addMarqueeAnimation();
}
function addMarqueeAnimation() {
marquees.forEach((marquee) => {
// add data-animated="true" to every `.marquee` on the page
marquee.setAttribute("data-animated", true);
// Make an array from the elements within .marquee
const scrollerContent = Array.from(marquee.children);
// For each item in the array, clone it
// add aria-hidden to it
// add it into the .marquee
scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true);
duplicatedItem.setAttribute("aria-hidden", true);
marquee.appendChild(duplicatedItem);
});
});
}
//track mouse for gradient hover
const button = document.querySelectorAll(".marquee");
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("mousemove", (e) => {
const { x, y } = button[i].getBoundingClientRect();
button[i].style.setProperty("--x", e.clientX - x + "px");
button[i].style.setProperty("--y", e.clientY - y + "px");
});
}body {
margin: 0;
font-family: system-ui;
font-size: 2.5rem;
background: white;
color: black;
}
section {
position: relative;
}
.imgEmoji {
height: 2.5rem;
width: 2.5rem;
margin-bottom: -6px;
position: relative;
z-index: 999;
mix-blend-mode: unset;
}
.marquee {
--gap: 1.5rem;
display: flex;
gap: var(--gap);
overflow-x: clip;
background: white;
}
.marqueeContent {
display: flex;
gap: calc(var(--gap));
flex-shrink: 0;
align-items: center;
justify-content: space-around;
min-width: 100%;
padding-block: 0.75rem;
background: inherit;
}
/* Animation */
.marquee[data-animated="true"] .marqueeContent {
animation: scroll var(--marquee-duration, 15.5s)
var(--marquee-direction, forwards) linear infinite;
}
.marquee[data-animated="true"]:hover .marqueeContent {
animation-play-state: paused;
}
@keyframes scroll {
to {
transform: translate(
calc(-50% - calc(var(--gap) / 2))
);
}
}
/* Direction */
.marquee[data-direction="left"] {
--marquee-direction: forwards;
}
/* Speed */
.marquee[data-speed="faster"] {
--marquee-duration: 5s;
}
/* IDEA 1 */
/* pseudo element on non animated wrapper
+ it stays the same and is not animated
- images get effected since different stacking context
*/
.marquee:hover::after {
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: radial-gradient(
circle at var(--x, 0) var(--y, 0),
black 0vw,
red 21vw,
green 34vw,
yellow 51vw
);
mix-blend-mode: screen;
position: absolute;
z-index: 2;
}
/* IDEA 2 */
/* pseudo element on animated content
+ images are not effected
- since the pseudo element is also animated the gradient center changes
- when parts of both content groups are shown the gradient isn't the same on all elements
.marqueeContent:hover::after {
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
background: radial-gradient(
circle at var(--x, 0) var(--y, 0),
black 0vw,
red 21vw,
green 34vw,
yellow 51vw
);
mix-blend-mode: screen;
position: absolute;
z-index: 2;
}
*/
/* IDEA 3 */
/* background clip on all spans and a with text
+ images are not effected
- gradient is different and limited to each text element
span:not(:has(img)), .marqueeContent a {
background: radial-gradient(
circle at var(--x, 0) var(--y, 0),
black 0vw,
red 21vw,
green 34vw,
yellow 51vw
);
background-clip: text;
color: transparent;
}
*/
/* IDEA 4 */
/* background clip on wraper
+ images are not effected
- gradient is wierd the center is moving
.marquee:hover {
background: radial-gradient(
circle at var(--x, 0) var(--y, 0),
black 0vw,
red 21vw,
green 34vw,
yellow 51vw
);
background-clip: text;
color: transparent;
}
*/<section>
<div class="marquee" data-speed="faster">
<div class="marqueeContent">
<a target="blank">Happy Holidays</a>
<span>
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
</span>
<span aria-hidden="true">Happy Holidays</span>
<span aria-hidden="true">
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
</span>
<span aria-hidden="true">Happy Holidays</span>
<span aria-hidden="true">
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
</span>
<span aria-hidden="true">Happy Holidays</span>
<span aria-hidden="true">
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
<img class="imgEmoji" src="https://shorturl.at/kzntl" />
</span>
</div>
</div>
</section>