search

Home  >  Q&A  >  body text

CSS Marquee with fade-in/fade-out transition

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粉659516906P粉659516906304 days ago584

reply all(2)I'll reply

  • P粉706038741

    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.

    reply
    0
  • P粉015402013

    P粉0154020132024-03-28 00:07:04

    For anyone who encounters this question in the future - the answer to this question is a joint effort. Find the answer in the question.

    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

    reply
    0
  • Cancelreply