Background passed a list array, I need to achieve a running light effect.

I want to think, use CSS3, convenient and quick.

However the goose,

How do I know how many arrays the background is passing me to scroll through?

So the list array is dynamically changing, and I only have to dynamically change the scrolling time. The easiest thing I can think of is to scroll a line of text smoothly to the left with a CSS translateX. This is a group of animations, so use cSS3 animation to set the scrolling time.

Think it’s pretty beautiful ~~~

Actually the code:

In CSS, the scrolling column of the list array is arranged in a horizontal row. The animation effect is the scrolling row. Here is js code: const marqueeStyleArr = document. GetElementsByClassName ('marquee'); // Get the dom to scrollfor (leti = 0; i < marqueeStyleArr.length; TranslateX = this.translatex + marqueeStyleArr[I]. } const keyFrames = '@keyframes marquee1 {0% {transform: translateX(0); } 100% { transform: translateX(-${this.translateX}px); }} `;for (leti = 0; i < marqueeStyleArr.length; I++) {// make each item in each array scroll, so aforConst style = document.createElement('style'); // Create a style tag style.innerhtml = keyFrames; marqueeStyleArr[i].appendChild(style); MarqueeStyleArr [I].style.animation =${this.translateX / 46}s marquee linear infinite normal`; // Set the properties of the animation}Copy the code

Slightly upward corners of the mouth, from the small match gaze ~~

Do not square ~, also do not have skull pain, in fact, ash often simple ~

The above code can be summed up in one sentence:

I’m going to create a keyFrames with JS,

And then we add it as innerHTML to the DOM that we’re scrolling through,

After passing the style and animation,

The scrolling position and scrolling time are determined by the length of the list array returned in the background.

Divided by 46s is what I personally think is appropriate. You could divide it by some other number, but it’s just a different speed.

A chicken thieves ~ ~ ~

In fact, this direct manipulation of DOM feels not very good, but very convenient, if you have any other better suggestions or criticism, welcome to correct, thank you, hope you enjoy ~ pen core ~

Mood moment:

The smog in Chengdu today is so heavy ~~, this is someone else’s photo of the Global Center