How to create a sliding text reveal animation using HTML and CSS?-HTML Tutorial-php.cn

How to create a sliding text reveal animation using HTML and CSS?

王林

Release： 2023-09-07 16:53:02

forward

800 people have browsed it

How to create a sliding text reveal animation using HTML and CSS?

You may have seen sliding text display animations on different websites (such as personal portfolio websites) or even different video content, which gives users a different experience, and Text feels more alive. Sliding text animations can be easily created using HTML and CSS, which will attract the attention of users visiting our website.

In this article, we will learn how to create a sliding text display animation using only HTML and CSS

How to create sliding animation?

Let’s talk about the methods you can use to create sliding animations. The beginning of the animation will show our first text, in this case "Good morning", then the text will slide to the left and then by sliding to the right the second text "How was your day"

We will use keyframe properties to split the animation into different parts so that the final animation looks smoother. Let's look at the syntax of keyframe properties.

grammar

@keyframes appear
@keyframes slide
@keyframes reveal

Copy after login

You can see in the code above that the keyframe attribute is used. In the keyframe that appears, we will set how the first text is displayed.

In the keyframe slide, we will move the text horizontally.
In keyframe display we will display the entire remainder of the text.

Example

To better understand what this property does, let's look at an example of creating an animation.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of</title>
      <style>
         .container {
            overflow: hidden;
            width: 80%;
            margin: 0 auto;
            padding: 20px;
         }
         .slider {
            display: flex;
            transition: transform 0.5s ease-in-out;
         }
         .slide {
            width: 100%;
            text-align: center;
            font-size: 72px;
            font-weight: bold;
            color: #333;
         }
         .slider.slide-1 {
            transform: translateX(0%);
         }
         .slider.slide-2 {
            transform: translateX(-100%);
         }
         .slider.slide-3 {
            transform: translateX(-200%);
         }
      </style>
   </head>
   <body>
      <div class="container">
      <div class="slider">
      <div class="slide">A</div>
      <div class="slide">B</div>
      <div class="slide">C</div>
      <div class="slide">D</div>
      <div class="slide">E</div>
      <div class="slide">F</div>
      </div>
      </div>
      <script>
         var currentSlide = 1;
         var slider = document.querySelector('.slider');
         setInterval(function () {
            currentSlide++;
            if (currentSlide > 26) {
               currentSlide = 1;
            }
            slider.classList.remove('slide-' + (currentSlide - 1));
            slider.classList.add('slide-' + currentSlide);
         }, 1000);
      </script>
   </body>
</html>

Copy after login

In the code above, we create an animation that displays letters with a transition time of 0.5 seconds, and the user can adjust the time interval and font size to suit the user's specific use case. < /p>

The output can be changed by changing the number of letters and the letters themselves using HTML and CSS, or the user can create an array using JavaScript and easily loop through it.

Example

In this example, we will do some basic styling, such as adding background color, setting alignment, etc. Then we're going to use the animation properties and then we're going to use keyframes to animate each frame so that we can get a smoother output.

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of using the keyframe</title>
      <style>
         body {
            background: black;
         }
         .text {
            width: 20%;
            top: 50%;
            position: absolute;
            left: 40%;
            border-bottom: 5px solid white;
            overflow: hidden;
            animation: animate 2s linear forwards;
         }
         .text h1 {
            color: white;
         }
         @keyframes animate {
            0% {
               width: 0px;
               height: 0px;
            }
            30% {
               width: 50px;
               height: 0px;
            }
            60% {
               width: 50px;
               height: 80px;
            }
         }
      </style>
   </head>
   <body>
      <div class="text">
      <h1> Hi How's your day going?<h1>
   </body>
</html>

Copy after login

The above code is the combined code which will give us the following output

This is what our output will look like after using HTML and CSS code.

in conclusion

Keyframes can be used to specify rules for specific frames, and we can also use different styles in them so that the properties change every time. Specification of keyframes is done by using percentages, such as 0% (beginning of animation) and 100% (end of animation), and rules can also have "from" or "to" also indicating start and end. The animation ends.

In this article, we learned how to create a text sliding animation using HTML and CSS.

The above is the detailed content of How to create a sliding text reveal animation using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!