Javascript/CSS: Fade string of text as it gets longer Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Javascript/CSS: Fade string of text as it gets longer without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I have searched for an answer to this and it may exist somewhere but I am not sure how to explain it, I keep finding methods to fade text on/off load which is not how I am trying to do this. I am trying to fade some text on the same line, and I will attach a simulated screenshot I made in Photoshop :

font fade

In the current font family and size I have set, I would like it to start to fade around 20 chars or so into the text. Ideally, if I can do something like…

<span class="fadeout"> 

or something of the like, it would be simple.

Answer

If your background color is known (ie black, as in the image above), then you could use a Pseudo CSS selector like so to simulate the effect:

.fadeout {
  position:relative;
  color: #fff;
  background: #000;
}

.fadeout:after {
  content:'';
  top:0;
  bottom:0;
  right:0;
  width:50%;
  background: linear-gradient(90deg ,transparent,black);
  position:absolute;
  z-index:1;
  pointer-events:none;
}
<span class="fadeout">This is a test test long text for example</span>
We are here to answer your question about Javascript/CSS: Fade string of text as it gets longer - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji