0

This is an example of what I have:

body {
  background: linear-gradient(174deg, #00d3fe, #000000, #ee00ff);
  background-size: 600% 600%;
  -webkit-animation: AnimationName 32s ease infinite;
  -moz-animation: AnimationName 32s ease infinite;
  animation: AnimationName 32s ease infinite;
  color: white;
  overflow: hidden;
}

.queue {
  position: absolute;
  top: 5vh;
  left: 2.5vw;
  max-height: 37vh;
  overflow: hidden;
  font-family: "Open Sans"
}

.queue:after {
  content: "";
  position: absolute;
  top: 160px;
  left: 0;
  height: 37vh;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), #000);
}

.song {
  margin-top: 1.5vh;
  margin-bottom: 0vh;
}

.song h6 {
  margin: 0;
  color: darkgrey;
}

.song p {
  margin-top: 0px;
  margin-bottom: 1px;
  font-size: 19px;
  color: rgb(105, 105, 105);
}

.queue h3+div p {
  color: white;
  font-size: 20px;
}

.queue h3+div h6 {
  color: rgb(224, 224, 224);
}

.queue h3+div {
  margin-bottom: 1vh;
}

@-webkit-keyframes AnimationName {
  0% {
    background-position: 0% 64%
  }
  50% {
    background-position: 100% 37%
  }
  100% {
    background-position: 0% 64%
  }
}

@-moz-keyframes AnimationName {
  0% {
    background-position: 0% 64%
  }
  50% {
    background-position: 100% 37%
  }
  100% {
    background-position: 0% 64%
  }
}

@keyframes AnimationName {
  0% {
    background-position: 0% 64%
  }
  50% {
    background-position: 100% 37%
  }
  100% {
    background-position: 0% 64%
  }
}

    .fadeout .o10 {}
    .fadeout .o09 { opacity: 0.9; }
    .fadeout .o08 { opacity: 0.8; }
    .fadeout .o07 { opacity: 0.7; }
    .fadeout .o06 { opacity: 0.6; }
    .fadeout .o05 { opacity: 0.5; }
    .fadeout .o04 { opacity: 0.4; }
    .fadeout .o03 { opacity: 0.3; }
    .fadeout .o02 { opacity: 0.2; }
    .fadeout .o01 { opacity: 0.1; }

    .fadeout .fadeline {
        height: 2px;
        background: linear-gradient(174deg, #00d3fe, #000000, 
        #ee00ff);
        -webkit-animation: AnimationName 32s ease infinite;
        -moz-animation: AnimationName 32s ease infinite;
        animation: AnimationName 32s ease infinite;

    }
<div class="queue">
  <h3>Queue</h3>
  <div class="song">
    <p>Never Gonna Give You Up</p>
    <h6>Rick Astley | Requested by DJ</h6>
  </div>
  <div class="song">
    <p>Never Gonna Give You Up</p>
    <h6>Rick Astley | Requested by DJ</h6>
  </div>
  <div class="song">
    <p>Never Gonna Give You Up</p>
    <h6>Rick Astley | Requested by DJ</h6>
  </div>
  <div class="song">
    <p>Never Gonna Give You Up</p>
    <h6>Rick Astley | Requested by DJ</h6>
  </div>
  <div class="song">
    <p>Never Gonna Give You Up</p>
    <h6>Rick Astley | Requested by DJ</h6>
  </div>
  <div class="song">
    <p>Never Gonna Give You Up</p>
    <h6>Rick Astley | Requested by DJ</h6>
  </div>
  <div class="fadeout">
      <div class="fadeline o01"></div>
      <div class="fadeline o02"></div>
      <div class="fadeline o03"></div>
      <div class="fadeline o04"></div>
      <div class="fadeline o05"></div>
      <div class="fadeline o06"></div>
      <div class="fadeline o07"></div>
      <div class="fadeline o08"></div>
      <div class="fadeline o09"></div>
      <div class="fadeline o10"></div>
      <div class="fadeline o10"></div>
      <div class="fadeline o10"></div>
      <div class="fadeline o10"></div>
  </div>
</div>

Now I want overflow text to be faded out but the background is animated so I can't have a solid gradient overlayed on the text.

From what I can find on StackOverflow, this has either never been done or is impossible.

I have already tried a background gradient where one side is transparent and the other is a solid color, but instead of a solid color, I put the gradient in the background. The problem is I can't find a way to align it well where the difference is unnoticeable.

Any answers help!

EDIT 1 As requested in the comments, here is a drawing of what the effect should look like. Click Here to View The Image

EDIT 2 I couldn't get the snippet to work (all code is in there though) but the StackOverflow Post referenced by @Stanislas gives the following result on my device. I am assuming this is because it is not the right dimensions as the background in body. I will try to get it to the right dimensions in the meantime and update with a full solution or problem.

kidsonfilms-python-rules
  • 3
  • 5
  • 1
    What do you mean by "overflow text" in this context? – Wais Kamal Feb 12 '21 at 17:36
  • @WaisKamal Anything that goes beyond the max height of the container (`.queue`) – kidsonfilms-python-rules Feb 12 '21 at 19:01
  • Could you draw or make a sketch of what you're trying to achieve? I don't understand what the final result should look like. – Stanislas Feb 12 '21 at 19:10
  • @Stanislas Check the Edit for an example – kidsonfilms-python-rules Feb 12 '21 at 20:46
  • I've fixed (added missing braces) and cleaned up (removed dupplicate CSS) from your snippet. It's now showing an animation. Can you confirm that this is how it currently looks for you? (Note: that you're normally expected to do this yourself and that there is still a lot of CSS that could probably be removed). – Stanislas Feb 13 '21 at 11:58
  • Is this what you're referencing you've tried: https://stackoverflow.com/questions/12664132/is-it-possible-to-graduate-the-opacity-of-an-html-element Can you add a snippet with the result of these solutions and show us why they don't work? – Stanislas Feb 13 '21 at 12:08

1 Answers1

0

Maybe this is what you're looking for THISSSSS. Don't try it on jsFiddle though... Just try it straight into the browser( it works ).. Didn't have enough rep. points to comment, so sorry.

.queue {
            position: absolute;
            top: 5vh;
            left: 2.5vw;
            max-height: 37vh;
            overflow: hidden;
            font-family: "Open Sans";
            -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
            mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
        }

I just changed this in your code

Ashish Bhattarai
  • 78
  • 7