What does the title mean? It may feel strange at first, but the font color is just a CSS style change. CSS styles are changing the entire font color, but how to change half or even 0.3333… What about the color of the font? First look at the effect, preview the url

IO /itagn/pen/a…

Starting from scratch

html

<div class="box">
  <div class="down">Blah blah blah blah blah</div>
  <div class="up">Blah blah blah blah blah</div>
</div>
Copy the code

css

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%, 50%);-webkit-transform: translate(50%, 50%);font-size: 5em;
  width: 5em;
  height: 1.2 em;
}
Copy the code

There are two divs involved, a red bean div and a light blue div, and they’re all “blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah, blah

The first key attribute z-index: nCopy the code
.up..down {
  position: absolute;
  height: 100%;
  line-height: 1;
}
.up {
   z-index: 2; 
}
.down {
  z-index: 1;
}
Copy the code

Visual analysis

Is the sliding div set to translucent, color-bound parts of the changed color?Copy the code

No, the sliding div is light gray, the background is red bean, it can’t be combined with light blue. If it’s not a combination of colors, it must be a custom color, which means that the light blue text itself is on top of the sliding DIV. If the text on top of the sliding DIV is going to look like this, it must have been cut out

The second key attribute overflow: hidden;Copy the code

The.up div is handled as a slider

.up {
  color: lightblue;
  z-index: 2;
  width: 1em;
  overflow: hidden;
  border-radius: 15%;
  background: #eee;
}
.down {
  color: indianred;
  z-index: 1;
}
Copy the code

Let’s go ahead and scroll through the image sequence. Let’s go the other way and scroll through the “window” so we create the animation by changing the value of left to scroll the window

The third key property is animationCopy the code
.up {
  animation: run 2.5 s infinite;
  -webkit-animation: run 2.5 s infinite;
}
@keyframes run {
  0% { left: -1em; 100%} {left: 5em; @ -}}webkit-keyframes run {
  0% { left: -1em; 100%} {left: 5em; }}Copy the code

However, we find that a div doesn’t seem to solve the problem, because the window needs a blank DIV, and the text content needs a new DIV. In fact, a div can solve the problem, we can construct it with the pseudo-element after or the pseudo-element before

The fourth key attribute: : before | | : : afterCopy the code

HTML structure changes,.up div only does slider

<div class="box">
  <div class="down">Blah blah blah blah blah</div>
  <div class="up"></div>
</div>
Copy the code

The CSS changes

.up::before {
  content: "Blah blah blah blah.";
  position: absolute;
  width: 5em;
}
Copy the code

But the window scrolling will also affect the position of the pseudo-element! In this case, let’s animate the pseudo-element to the opposite of the window motion, so that it is still relative to the browser.

.up::before {
  animation: run2 2.5 s infinite;
  -webkit-animation: run2 2.5 s infinite;
}
@keyframes run2 {
  0% { left: 1em; 100%} {left: -5em; @ -}}webkit-keyframes run2 {
  0% { left: 1em; 100%} {left: -5em; }}Copy the code

The above does not need to use JavaScript, materials are ready!

Maintainable optimization

CodePen address: optimized code

List the points that need to be optimized:

  • False content values and.down div text are DRY
  • How do I adjust the overall size of my presentation through JavaScript
  • Repeating the same values in CSS is not DRY enough
  • The movement track of the slider is always effectively above the text (that is, the next time the text content is changed, there is no need to change the left value at the end of the slide)

We found that we can’t change the content of a fake element with JavaScript. It would be nice if we could change the text of a div and the text of a fake element by modifying JavaScript variables!

The answer is yes, CSS can get CSS variables through var(), CSS variables can be set through — property, so we can mount all variables to the root property :root, can get CSS variables

And it can be found in the browser

document.querySelector(':root') = = =document.documentElement // true
Copy the code

Here is the root of HTML attributes, then through the document. The documentElement. Style. The setProperty (‘ – attribute, value) can not only guarantee the maintainability of the code, then we put the CSS code through variable optimization, Import it all into JavaScript objects, as DRY as possible!