preface

I haven’t written a technical article for a long time. Recently, I want to share with the group and prepare to do a CSS related article. It must use the last CSS article like a filter to change the font color.

In addition, this article is to do JavaScript extension, this article to ensure that JavaScript does not stick to the pan, with CSS do not touch JavaScript!

The principle of

Break up the text

To talk about the most basic principle, last time to talk about the text filter, first from the simplest case to consider, split a text. Code: CSS Imagination one

How to do the above effect?

1. Same level: a div with a blue color on the left, truncated to the left. A div with a red color on the right. Finally, it is assembled by layout.

2. Hierarchy: a complete div with red color at the bottom, and a div with blue color at the left, the left part of the screenshot.

This paper adopts the second kind: hierarchical differentiation

// html
<div class="dong">
  <div class="up">In the east</div>
  <div class="down">In the east</div>
</div>

// css
.dong {
  position: relative;
}
.up {
  position: absolute;
  z-index: 2;
  width: 0.5em;
  overflow: hidden;
}
.down {
  position: absolute;
  z-index: 1;
}
Copy the code

According to this principle, it is possible to divide text horizontally into multi-color text. Right? I quickly found a problem because the text split always starts from the left.

If the above scheme is changed to: a full blue div at the bottom and a red div at the top, the screenshot on the right. This becomes the following:

Therefore, if the problem of cutting from the left can be solved, it can be divided into complete multi-color text in a real sense, which is also the problem faced by scheme 1: no hierarchy. Code: CSS Imagination ii

My solution here is to put the text in the content of the right div pseudo-element. Because the intercepted text for the DONG div is shifted by 0.5em to the left, if it is placed on the pseudo-element, the left can be set to -0.5em to restore the text position. The important thing is to give the up div a height.

Text scrolling

We know that animation = each frame of picture + time. Based on the above hierarchical solution, combine animation to make the UP div move from left to right, and the pseudo element corrects the text position by setting left to move from right to left, so it looks like a complete scrolling text effect.

Code: CSS Imagination three

For a more complete animation, see the previous article and change the font color like a filter

CSS direction extension

How else can you extend it in the DIRECTION of CSS?

In fact, I didn’t think much about it, but RECENTLY I visited Douyin a lot. I saw a very good special effect: a person holding a rectangular rag and dancing. Inside the rag is another picture corresponding to the position of the picture.

Not to overthink, and before the operation of the processing of the text is similar to the wonderful ah! Can this effect also land on the image?

Code: Picture mirror

imagination

The principles of text and images are the same, and since the JavaScript in this article is non-stick, the shapes and movements are only basic.

Is it possible to monitor the mouse to make a small scrape effect: the bottom is “thank you for your patronage”, the top is “sandpaper”, the part of the swipe by changing the shape of up to achieve? If you’re interested, you can explore it.