“This is the 15th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

preface

This article serves as the fourth article of “how many tricks can the text effect play after all”, takes everybody to study the text of the leap.

Always watch the quiet text inevitably a bit boring, today I will take you to achieve a leaping text, leaping text or there are many application scenarios, such as the following jumping loading effect, can be used as loading ING effect.

Basic knowledge of

Css3 animation property

An animation can define one or more sets of animations. It has the following properties:

  • Animation-timing-function: sets the speed curve of the animation
  • Animation-direction: Defines whether the animation should be rotated backwards
  • Animation-name: indicates the animation namekeyframeThe binding
  • Animation-duration: the time required to complete the animation
  • Animation-delay: Specifies the delay for starting an animation
  • Animation-rotund-count: Specifies the number of times an animation should be played

Implement a single text jump

Animation can be used to animate a single text label by setting the keyFrame to 100% downward transformY(-20px).

.loading span {
    transform: translateY(20px);
    animation: bounce 0.3 s ease infinite alternate;
}

@keyframes bounce {
    to {
        transform: translateY(-20px); }}Copy the code

C. infinite D. alternate

Bam, bam, bam, bam, bam, bam, bam, bam!

Demand further

Single word jump more boring ah, as a good citizen of socialism with characteristics, unity is strength, we want to jump together ah.

There are several difficulties in realizing multiple text jumps:

  1. Multiple word jumps
  2. Alternate text jump

Multiple word jumps

When using a span to implement the packet jump above, so using multiple SPAN tags to wrap multiple words can achieve multiple word jump at the same time.

<div class="loading">
    <span>small</span>
    <span>package</span>
</div>
Copy the code

You see, the bag never stops jumping.

It’s not fun. What if I don’t know the word count in advance? There is no way to predefine a span for a number. Remember, in JavaScript, you get the text through the textContent property, and then split the text through split, creating a SPAN tag for each text.

let loading = document.querySelector(".loading");
let letters = loading.textContent.split("");
loading.textContent = "";
letters.forEach((letter, i) = > {
    let span = document.createElement("span");
    span.textContent = letter;
    loading.append(span);
});
Copy the code

Now I changed the contents of.loading to the battlefield packet and the battlefield packet started to jump in place.

One by one jump effect

It does split jumps for each text, but it doesn’t seem obvious. It feels like putting all the text in a span, and then a span jumps. And multiple text synchronization jump zha look zha han (should not be the name han).

In order to make Ah bao no longer silly, I want a handsome jump, let each word next to jump try, after the war word jump, field word jump, small word and bag word jump, round and round, never stop.

At first glance, this might sound a bit difficult to implement, but at the beginning of this article, the animation provides the animation-delay property to set the delay time of the animation, so different animation-delay can be set according to the text order.

span.style.animationDelay = `${i / 10}s`
Copy the code

Looks much better. Active Bag is still handsome.

3D Text jump

The monotony of jumping is still a bit boring, so add a 3D effect to round up the text, and use the text-shadow property for the 3D effect.

Text-shadow overlays multiple shadows to achieve a cool 3D effect. After that, the animation 100% slightly modifies the shadow effect.

text-shadow: 0 1px #bbb.0 2px #bbb.0 3px #bbb.0 4px #bbb.0 5px #bbb.0 6px transparent, 0 7px transparent, 0 8px transparent,
          0 9px transparent, 0 10px 10px rgba(0.0.0.0.4);
/* animation */
text-shadow: 0 1px #bbb.0 2px #bbb.0 3px #bbb.0 4px #bbb.0 5px #bbb.0 6px #bbb.0 7px #bbb.0 8px #bbb.0 9px #bbb.0 50px 25px rgba(0.0.0.0.2);
Copy the code

The 3D battlefield pack jumps. It’s cool.

Source warehouse

Portal: Leaping words

Past wonderful articles

  • Cow guest latest front-end JS written test 100 questions
  • The latest front end of the interview questions summary (including analysis)
  • Grab the latest front end test five hundred data analysis JS interview hot spots
  • Happy cat stroking for VSCode and website adoptive cats
  • Native JavaScript soul Test (1), how much can you answer?
  • A thorough understanding of prototypes and prototype chains in JavaScript
  • Complete understanding of EventLoop in JavaScript
  • “2W word big chapter 38 interview questions” completely clear JS this pointing to the problem
  • Reference: Staggered Bouncing 3D Loading
Copy the code

After the language

Guys, if you find this article helpful, give a like to 👍 or follow ➕ to support me.

In addition, if this article has a question, or do not understand part of the article, you can reply to me in the comment section, we come to discuss, learn together, progress together!

If you feel that the comment section does not understand, you can also add my wechat (li444186976) or QQ (3315161861) for detailed communication, the name is battlefield small bag.