• Slide an Image to Reveal Text with CSS Animations
  • Jesper Ekstrom
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Fengziyin1234
  • Proofread by: Portandbridge, Baddyo

In this article, I hope to take you through the CSS Animation Property and explain in detail one of the effects of my personal website: making text appear behind moving objects. If you want to see the final result, here’s an example.

We’ll start here:

See Jesper Ekstrom’s Revealing Text Animation Part 4 – Responsive case here.

Even if you’re not very interested in this effect, it’s still a good exercise to expand your CSS knowledge and start creating your own animations from this effect. In my case, studying animation in depth gave me more confidence in my CSS abilities, made me more imaginative, and made me more interested in front-end development in general.

Are you ready? Let’s get started.

Step 1: Mark your main element

Before we start animating the effects, let’s create a parent element that contains the entire viewport. In this element, we add text and images to the two divs for later customization. The HTML will look like this:

<! -- Parent container -->
<div class="container"> 
  <! -- div containing image -->
  <div class="image-container">
  <img src="https://jesperekstrom.com/wp-content/uploads/2018/11/Wordpress-folder-purple.png" alt="wordpress-folder-icon">
  </div>
  <! Div containing the text to be displayed -->
  <div class="text-container">
    <h1>Animation</h1>
  </div>
</div>
Copy the code

We’ll use a solid conversion trick to use position: absolute; Center both divs horizontally and vertically in the parent container. Because we want our image to appear before the text, here we give the image a larger Z-index value.

/* The parent element occupies the entire page. * /
.container {
  width: 100%;
  height: 100vh;
  display: block;
  position: relative;
  overflow: hidden;
}

/* Div */
/* Small skills: https://css-tricks.com/centering-percentage-widthheight-elements/ */
.image-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%, 50%);z-index: 2; /* Make sure the image is on */
}

/* The image in the first div */
.image-container img {
  -webkit-filter: drop-shadow(4 px 5 px 5 px rgba (0,0,0,0.6));filter: drop-shadow(4 px 5 px 5 px rgba (0,0,0,0.6));height: 200px;
}

Div */ contains the text to be displayed
/* Same center method */
.text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(50%, 50%);z-index: 1; /* Place this div under the image container */
  margin-left: -100px;
}
Copy the code

We haven’t kept browser prefixes in any of our examples throughout this article, but if you’re using these effects in a production environment, consider them.

Now our example should look like this, basically the image element on top of the text element.

Here please see the case of Revealing Text Animation Part 1 – Mail Elements.

Step 2: Hide the text behind a div

To make our text display from left to right, we’ll add another div to our.text-container.

<! -... -->

  <! -- div containing text to be displayed -->
  <div class="text-container">
    <h1>Animation</h1>
    <div class="fading-effect"></div>
  </div>
  
<! -... -->
Copy the code

Then add and assign the following CSS properties:

.fading-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  background: white;
}
Copy the code

As you can see, the background of the div is white and can be blended into the parent element, while the text is hidden behind it.

If we try changing the length of the div, the text will start to appear. You can try it out in our example below:

Reveal Text Animation Part 2-hiding Block.

There is another way to achieve the same effect without adding an extra div with a background. I’ll cover it later in the article. 🙂

Step 3: Define the Animation KeyFrames

Now we get to the fun part! We’ll use the Animation Property and its @KeyFrames function to start animating our target. Let’s start by creating two different @keyframes, one for our image and one for our text. The code is as follows:

/* Slide the image from left (-250px) to right (150px) */
@keyframes image-slide {
  0% { transform: translateX(-250px) scale(0); 60%} {transform: translateX(-250px) scale(1); 90%} {transform: translateX(150px) scale(1); 100%} {transform: translateX(150px) scale(1); }}/* Slide text */ by shrinking the target to disappear (100% to 0%)
@keyframes text-slide {
  0% { width: 100%; 60%} {width: 100%; }
  75%{ width: 0; 100%} {width: 0; }}Copy the code

I recommend adding all @keyFrames to the top of the CSS file for better structure, but this is just a personal preference.

The reason I only use a small percentage of @keyFrames (mostly from 60% to 100%) is that I chose to animate both objects in the same time period rather than adding an animation-delay to them. It’s just a personal preference. If you do what I did, be sure to set values for 0% and 100%; Otherwise, the animation will start looping or cause some strange results.

To enable @keyframes in our class, we need to call our animation name on the CSS property animation. For example, to add an image-slide to an image element, we do this:

.image-container img {
  /* [animation name] [animation time] [animation deformation method] */
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
}
Copy the code

The use of the @keyframes name is like creating a class. In other words, it doesn’t matter what the animation name is here, just make sure you use the same name on the element that you want to use the animation.

If the cubic- Bezier part here makes your head feel big, check out this post from Michelle Barker. She explained the topic in depth. If only for the purposes of this demonstration, I think I’ll suffice it to say that this is a way to create a custom animated curve for the entire movement of an object. Cubic-bezier.com is a great site for generating these values (rather than guessing).

We mentioned earlier that we wanted to avoid looping animations. We can force the object to stop moving after the animation reaches 100% by using the animation-fill-mode subproperty.

.image-container img {
  animation: image-slide 4s cubic-bezier(.5,.5,0,1);
  animation-fill-mode: forwards;
}
Copy the code

So far so good!

Here please check out Revealing Text Animation Part 3 – @keyframes.

Step 4: Realize responsiveness (responsiveness)

Since animation is based on a fixed size (pixels), changing the viewport width causes elements to deviate, which makes it difficult to hide and display elements based on their position. We can solve this problem by creating multiple animations on different media Queries (which was my initial approach), but dealing with so many animations at once is not fun. We can use the same animation to solve this problem by changing the properties of a feature at its breakpoint.

Such as:

@keyframes image-slide { 0% { transform: translatex(-250px) scale(0); } 60% { transform: translatex(-250px) scale(1); } 90% { transform: translatex(150px) scale(1); } 100% { transform: translatex(150px) scale(1); }} @media screen and (max-width: 1000px) {@keyframes image-slide {0% {transform: transform; translatex(-150px) scale(0); } 60% { transform: translatex(-150px) scale(1); } 90% { transform: translatex(120px) scale(1); } 100% { transform: translatex(120px) scale(1); }}}Copy the code

That will do. It’s all responsive!

Here please check out Revealing Text Animation Part 4 – Responsive.

Alternative: Use text animations instead of opaque divs

I promised earlier that I would introduce a different way to hide text. Let’s introduce it now.

Instead of using a brand new div

, we can use a trick called background-clip to materialize the background color through text: 
.text-container {
  background: black;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
Copy the code

Transparent text allows the color of the background to filter through, effectively hiding text. And, because the text is hidden with a background, we can change the width of the background and observe how the text is cut according to the given width. This also makes it possible to add linear gradient colors to text and even background images.

I didn’t use this method in the previous demo because it doesn’t work well with IE (you see, the code has the -webkit browser prefix). The method we used in the actual demonstration still works if you replace text with pictures or any element.

Very simple little animation, isn’t it? It’s pretty subtle and can add color to your UI elements. For example, it can be used as a caption to reveal explanatory text or even pictures. Alternatively, you can use a little JavaScript code to listen for click or scroll events that trigger animations to enrich the interaction of the web page.

Any questions about our animation? Any tips on how to make them better? Let me know in the comments below!

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.