I'm trying to make a CSS marquee with text that fades in from the right edge and fades out from the left edge. Only the edges of the letters should become transparent. I call this the "Opacity Mask" and feather it to the left/right edges.
I can find CSS marquee code examples, but none have a fade in/out effect like this. I also want the background to be completely transparent and only the text to have an edge effect.
I tried adding a gradient to the container, but in hindsight that doesn't seem to be the right path. Below is the code I've come up with so far. Please help, thank you!
@Bernard Borg: I've updated my code with a second new example. Beyond that, no opacity is used - so A) relying on hardcoding to the underlying background color and B) only working on a solid color background - which is acceptable for my use case. Thanks! (Any idea how to overlay the marquee with opacity instead of color?)
div#container { width: 60%; height: 100%; position: absolute; background-color: #e6e9eb; } div#marquee-container { overflow: hidden; } p#marquee { animation: scroll-left 10s linear infinite; } @keyframes scroll-left { 0% {transform: translateX( 140%)} 100% {transform: translateX(-140%)} } div#marquee-cover { position: absolute; top: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(to right, rgba(230, 233, 235, 1) 0%, rgba(230, 233, 235, 0) 15%, rgba(230, 233, 235, 0) 85%, rgba(230, 233, 235, 1) 100%); }
<div id="container"> <div id="marquee-container"> <p id="marquee">The quick brown fox jumps over the lazy dog</p> <div id="marquee-cover"/> <!--thanks Bernard Borg--> </div> </div>
P粉7060387412024-03-28 00:28:44
Animate the opacity property (clean up code for better readability);
body { margin: 0; } div#marquee-container { width: 600px; height: 150px; background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%); } p#marquee { text-align: right; animation: scroll-left 10s linear infinite; } @keyframes scroll-left { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(-80%); opacity: 0; } }
Testing
Side note: You no longer need the vendor prefix for animations.
P粉0154020132024-03-28 00:07:04
This is the closest I can get to your updated question;
body { margin: 0; } #container { width: 100%; height: 100vh; background-color: grey; display: flex; align-items: center; } #marquee-container { overflow: hidden; position: relative; display: flex; justify-content: space-between; align-items: center; } p#marquee { font-family: 'Segoe UI', sans-serif; font-size: 30px; font-weight: bold; height: 80%; animation: scroll-left 5s linear infinite; white-space: nowrap; } #first-cover, #second-cover { height: 100vw; backdrop-filter: opacity(50%); width: 30vw; z-index: 100; } #first-cover { background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2)); } #second-cover { background: linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(128, 128, 128, 0.2)); } @keyframes scroll-left { 0% { transform: translateX(130%); } 100% { transform: translateX(-130%); } }
The quick brown fox jumps over the lazy dog