CSS Vertical Scrolling Marquee with Gradient Mask

Question

I am trying to create a vertically scrolling marquee over a full bleed background. The scrolling text will be contained at the center of the page, and must pass behind a gradient opacity mask at the top and bottom.

I can apply the gradient mask at the top or bottom, but not both.

Is there a way to do this with only CSS / HTML?

See fiddle with the opacity mask applied to the bottom of the container - goal is to get that mask on top and bottom of container.

  .bgimage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
  z-index:-2;
  }
  .container {
  width: 100%;
  height: 10vw;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align:center;
  -webkit-mask-image: -webkit-gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  
  }

  .marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
  }


  /* Make it move! */
  @keyframes marquee {
  0%   { top:   18vw }
  100% { top: -65vw }
  }

  /* Make it look pretty */
  .microsoft .marquee {
 margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  color: white;
  font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  }

<div class="microsoft container">
    <p class="marquee">ONE<br /><br />TWO<br /><br />THREE<br /><br />FOUR<br /><br />FIVE<br /><br />SIX.</p>
</div>
<div class="bgimage">

</div>

Temani Afif · Accepted Answer · 2020-03-07T22:44:47.773

Simply update the gradient like below:

.bgimage{
  position: fixed;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
  z-index:-2;
  }
  .container {
  width: 100%;
  height: 10vw;
  margin: 1em auto;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
  text-align:center;
  -webkit-mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
          mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
  
  }

  .marquee {
  top: 6em;
  position: relative;
  box-sizing: border-box;
  animation: marquee 20s linear infinite;
  }


  /* Make it move! */
  @keyframes marquee {
  0%   { top:   18vw }
  100% { top: -65vw }
  }

  /* Make it look pretty */
  .microsoft .marquee {
 margin: 0;
  padding: 0 1em;
  line-height: 1.5em;
  color: white;
  font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
  }

<div class="microsoft container">
  <p class="marquee">ONE<br><br>TWO<br><br>THREE<br><br>FOUR<br><br>FIVE<br><br>SIX.</p>
</div>
<div class="bgimage">

</div>

CSS Vertical Scrolling Marquee with Gradient Mask

1 Answers1