In the last article, I summarized several common ways to implement animation. Next, I will share a real animation effect as shown below. If you haven’t read the previous article, I hope you can read the collection support for a little ~ 😄

How many ways can the front end animate? Juejin. Cn/post / 704037…

                                               

Demand analysis

Let’s first figure out what kind of animation we want to achieve, is it a merry-go-round? Was it a barrage? Looks like a waterfall? Let’s call it a “merry-go-round”. Let’s break down the main points:

  • Two lines of entry, entry content scattered rank, the same spacing;
  • Two lines scroll at the same time;
  • Scroll to left beyond hiding;
  • Can scroll in an infinite loop;

In actual combat

According to the requirements, start from the following two aspects:

Step 1: Figure out the style

There is not much to say about style implementation, such as font color, background, etc., pay attention to element box preparation and Flex layout; Prepare a window box and an entry box, the entry box has two identical sub-boxes, pay attention to the sub-box width is larger than the window box, and the entry box broadband is twice the sub-box (just fit two sub-boxes), the sub-box flex layout;

Step 2: Animate

Considering the comparison of different animation implementation schemes in the previous article, we consider using CSS to achieve CSS;

Animation to infinite scroll to the left, but should pay attention to us and could really make a element is very wide, and then from the current location has been moved to infinity, left our thoughts from the current position move to the left half of the entry box distance (the distance of a child box), then immediately back to the original position to animation cycle time;

Finish the idea of two steps, see the specific code at the bottom;

Code implementation

HTML

<body> <div class="wrapper"> <div class="wrapper__box-wrapper" > <div class="wrapper__box-wrapper__line"> <div> <span> What is happy Planet </span> <span> <span> Lie flat </span> <span> stunned </span> </div> <div> <span> What is happy Planet </span> <span> <span> <span> <span> stunned </span> </div> <div class="wrapper__box-wrapper__line"> <div> <span>requestAnimationFrame</span> <span>setTimeout</span> <span>setInterval</span> </div> <div> <span>requestAnimationFrame</span> <span>setTimeout</span> <span>setInterval</span> </div> </div> </div> </div></body>Copy the code

CSS

.wrapper{ position: relative; height: 100px; width: 300px; overflow: hidden; } .wrapper__box-wrapper{ height: 100px; animation: move 5s linear infinite; position: absolute; left: 0px; background: #409EFF; width: 800px; } .wrapper__box-wrapper__line{ overflow: hidden; margin: 10px 0; } .wrapper__box-wrapper__line div{ float: left; display: flex; text-align: center; width: 50%; }. Wrapper__box-wrapper__line span{background: rgba(255, 255, 255, 0.5); color: #fff; display: inline-block; padding: 0 5px; margin-right: 10px; border-radius: 5px; flex: 1 0 auto; line-height: 35px; } @keyframes move { 0%{ left: 0; } 100%{ left: -400px; }}Copy the code