CODEWITHSUNDEEP
htmlcss
zdixon
zdixon

Reputation: 349

How to animate text color as background color crosses the text

I have some text with an animated background, basically just a solid color that fills from top to bottom on hover. I'd like the text to change color as the background crosses the text. So if it were to pause halfway through the text, or even a letter, part of the text would be one color and the rest of the text another color. I know I've seen this done somewhere but can't find any examples now.

In my gif below, I have the text just transitioning between colors but it's not really the effect I'd like to have.

hover example

Upvotes: 0

Views: 1251

Answers (2)

Kravimir
Kravimir

Reputation: 690

What I would do is use a pseudo-element (e.g. "::before") to duplicate the text and have the different color and background, absolutely position it on top of the other, and then transition the clip-path (with as well clip for IE and Safari support).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.example {
    color: #115;
    background: #fff;
    font-size: 2.5em;
    padding: .25em;
    position: relative;
}
.example:hover,
.example:focus {
    /* this empty rule is a fix for IE10 */
}
.example::before {
    content: attr(data-text);
    color: #fff;
    background: #115;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .25em;
    clip: rect(0,0,2em,0);
    clip-path: inset(0 100% 0 0);
    -moz-transition: clip .5s;
    -webkit-transition: clip .5s;
    transition: clip-path .5s, clip .5s;
}
.example:hover::before,
.example:focus::before {
    clip: rect(0,1920px,2em,0); /* for old browsers that don't support viewport units */
    clip: rect(0,100vw,2em,0); /* can't transition this if 'auto' is specified for any edge */
    clip-path: inset(0);
}
</style>
</head>
<body>

<h2 class="example" data-text="Example">Example</h2>

</body>
</html>

Upvotes: 1

user10384200
user10384200

Reputation:

I have something like this, I hope it will help you:

button {
  text-align: left;
  position: relative;
  height: 45px;
  width: 100%;
  padding: 5px 5px 5px 15px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 2px;
  color: #383736;
  border: 2px #383736 solid;
  text-transform: uppercase;
  outline: 0;
  overflow: hidden;
  background: none;
  z-index: 1;
  cursor: pointer;
  transition: 0.08s ease-in;
  transform: rotate(90deg);
  transform-origin: 20px 20px;
  transition-delay: 0.48s;
}

.btn-fill:hover {
  transition: 0.5s linear all;
  color: white;
}

.btn-fill::before,
.btn-fill::after,
.btn-fill span::before,
.btn-fill span::after {
  content: "";
  position: absolute;
  z-index: -2;
  background: #383736;
  transition: all 1s;
}

.btn-fill:hover::before,
.btn-fill:hover::after,
.btn-fill:hover span::before,
.btn-fill:hover span::after {
  transition: all 1s;
}

.btn-fill-ltr::before {
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
}

.btn-fill-ltr:hover::before {
  width: 100%;
}
<button class="fill btn-fill btn-fill-ltr">About</button>

Base on the work of Jamie Boelman.

Codepen: https://codepen.io/boelmanj/pen/KVveKV

Upvotes: 0

Related Questions