CODEWITHSUNDEEP
csscss-transitionstransition
Opa114
Opa114

Reputation: 548

Text Color Transition Effect from Bottom to Top

How can i let the text color changing from black to red with a css transition effect (e.g. ease-out) from bottom to top for a specific height in percent?

I got a value - let's say 50%. So now i want to change the text color of my example text: example from black to red with a css transition effect. But the transition effect should start at the bottom and then go ahead to top (and not from left to right as many examples demonstrate it). In the end the text "example" should be half colored with black - from bottom to the middle of the test (50%) and half colored with red - from the middle of the text to top (100%).

Upvotes: 0

Views: 3001

Answers (2)

Hugo Stiven Laguna Rueda
Hugo Stiven Laguna Rueda

Reputation: 159

There are many methods to make the effect, I recommend for a smoother transition, create in the background a gradient with the colors you want to use and move the background to a position where only the colors you want are visible. 

h1{
  font-size: 4em;
  text-align: center;
  color: transparent;
  background-position-y: -0%;
  background-image: linear-gradient( black, red, white, green );
 -webkit-background-clip: text;
  -moz-background-clip: text;
  transition: background 1400ms ease;
  background-size: auto 400%;
}
h1.deg1{
  background-position-y: -100%;
}
h1.deg2{
  background-position-y: -200%;
}
h1.deg3{
  background-position-y: -300%;
}
<h1 id="prueba"> Hola Mundo</h1>

<button onclick="document.getElementById('prueba').className='deg1'"> Cambiar 1 </button> 
<button onclick="document.getElementById('prueba').className='deg2'"> Cambiar 2 </button> 
<button onclick="document.getElementById('prueba').className='deg3'"> Cambiar 2 </button>

Upvotes: 3

Akin Hwan
Akin Hwan

Reputation: 627

Hey @Opa114 please take a look at my codepen to understand how I achieved this effect https://codepen.io/akinhwan/pen/JvmJpO

a {
  font: 300 42px/1.5 "Helvetica Neue", sans-serif;
  margin-left: 80px;
  color: $main-color;
  text-decoration: none;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(
    0deg,
    $secondary-color,
    $secondary-color 50%,
    $main-color 50%);
    background-size: 100% 200%;
    background-position: 0% 0%;
}

a:hover {
  transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1);
  background-position: 100% 100%;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient background-size and background-position are important here to control the effect

Upvotes: 2

Related Questions