Creating a smooth transition effect on text length using Javascript and CSS: Fading the text as it

Question

Creating a smooth transition effect on text length using Javascript and CSS: Fading the text as it

I have been searching everywhere for a solution to my issue, but I haven't found it yet. I keep coming across methods to fade text on and off on load, which is not what I need. My goal is to fade some text on the same line, and I have created a mockup in Photoshop to illustrate my idea:

https://i.sstatic.net/KNQc0.jpg

With the current font family and size I am using, I would like the text to start fading around 20 characters into the string. Ideally, I am hoping to achieve this effect by adding a class like...

<span class="fadeout">

or something similar. Keeping it simple is key.

javascript css

Answer 1

Answer №1

If you're looking for gradient text specifically for webkit browsers, here's how you can achieve it:

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(0deg, #fff, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
body {
  background-color:black;
  }

<h1>Test text that is long</h1>

If you want the fade effect to start after a specific point in the text, you'll need to wrap that part in a span:

span.fade {
  background: -webkit-linear-gradient(0deg, #fff, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
h1 {
  color:white
}
  
body {
  background-color:black;
  }

<h1>Test text that is long <span class="fade">but only begins to fade here</span></h1>

Answer 2

If you're looking for gradient text specifically for webkit browsers, here's how you can achieve it:

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(0deg, #fff, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
body {
  background-color:black;
  }

<h1>Test text that is long</h1>

If you want the fade effect to start after a specific point in the text, you'll need to wrap that part in a span:

span.fade {
  background: -webkit-linear-gradient(0deg, #fff, #000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  }
  
h1 {
  color:white
}
  
body {
  background-color:black;
  }

<h1>Test text that is long <span class="fade">but only begins to fade here</span></h1>

Answer 3

Answer №2

If you have a specified background color (such as black, like in the image provided), you can create a Pseudo CSS selector to achieve a similar 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>

Answer 4

If you have a specified background color (such as black, like in the image provided), you can create a Pseudo CSS selector to achieve a similar 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>

Creating a smooth transition effect on text length using Javascript and CSS: Fading the text as it

Answer №1

Answer №2

Similar questions

Div over which scroll editing is performed

Limit the bootstrap datepicker to display only certain dates and today's date

Encountering difficulties in accessing state while utilizing async callback functions in React.js

Create a basic single page application with Node.js and Express

Exploring the indexOf method in Jade

import the JSONP file from the local directory and assign it to a variable on

How to access a particular tab in Bootstrap 5 using an external link

Can firebase and express be integrated seamlessly?

An error occurred in Node.js while parsing data: Headers cannot be set after they have already been sent to the client

How can I create a custom elevation for a Vuetify v-menu?

Different ways to restrict Table Header to 2 lines using CSS

Unable to post form data into database due to Javascript undefined data situation

Having trouble utilizing props with Vue axios? Running into an undefined error? Unsure how to properly use props with axios?

Removing spaces in the Datatables pagination buttons: A step-by-step guide

I'm receiving a Reference Error stating that 'next()' is not defined, despite the fact that I have defined it in my JavaScript code. What could be causing this issue?

How can I save the content from a tiptap editor in a PHP form?

Utilizing JSON data for efficient React component rendering

What is the best technology to implement for a band website design?

Quickest method to create a new empty stylesheet in the developer tool of Chrome's inspector ("Inspector stylesheet")

What methods can I use to minimize the gap between images within the <figure> element?