ios 文本动画

Have you ever seen subtle text openings and wondered how they came about?

您是否曾经看过微妙的文字开口并想知道它们是如何产生的？

There’s so many of those out there, and it’s practically impossible to explain how they all work.

那里有很多东西，几乎不可能解释它们都是如何工作的。

However, let’s pick an example and let me show you how to recreate it.

但是，让我们举个例子，让我向您展示如何重新创建它。

I made the choice already, and here’s what we will build:

我已经做出了选择，这是我们将要建立的：

It’s a text opening for a fictitious creative agency. You can here.

这是一个虚构的创意公司的文本开头。 您可以此处 。

You see the flash, right? You also see how the animation is staggered — instead of animating the entire text at once, each word in the text is timed differently?

你看到闪光灯了吧？ 您还会看到动画是如何错开的-而不是一次动画整个文本，而是对文本中的每个单词设置不同的时间？

I’ll show you how to recreate these.

我将向您展示如何重新创建它们。

Put a smile on. You’ll love it!

戴上微笑。 你会爱上它！

介绍 (Introduction)

No one likes ugly markup. In fact, we won’t be writing much markup. Let’s just recreate this animation.

没有人喜欢丑陋的标记。 实际上，我们不会写太多标记。 让我们重新创建该动画。

Firstly, grab your hoodie (if you have one) and put on your dev hat (you’ve got to have one of those).

首先，抓紧连帽衫(如果有的话)，戴上开发帽(必须有其中一件)。

Now, let me walk you through the step by step process. It’s not difficult, to be honest.

现在，让我逐步指导您。 老实说，这并不困难。

1.介绍所需的简单标记。 (1. Introduce the Simple Markup Required.)

    
  
     
    We are a creative agency  
    

2.放入适当的背景图像。 (2. Put in a decent background image.)

.opening {  background-image: url('https://preview.ibb.co/cBVBf7/fantasy_3146946_1280.jpg')  }

Below is the result of that:

结果如下：

The result looks awkward, as the background image is repeated.

由于重复了背景图像，结果看起来很尴尬。

3.停止重复并使背景图像更漂亮。 (3. Stop the Repetition and Make the Background Image Prettier.)

.opening {  height: 100vh;  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.9)), url('https://preview.ibb.co/hkXMDS/fantasy_3146946_1920.jpg') no-repeat 50% 0%/cover;  }

If you don’t understand the code above, it hinges on the premise that multiple backgrounds can be added to an element via CSS. These backgrounds should be separated by a comma. In the example above, the linear-gradient represents one background, and the url(..) the other. One adds a linear gradient, the other, an image.

如果您不理解上面的代码，则以可以通过CSS将多个背景添加到元素为前提。 这些背景应以逗号分隔。 在上面的示例中， linear-gradient代表一个背景，而url(..)则代表另一个背景。 一个添加线性梯度，另一个添加图像。

Take a look at the illustration above. It should make more sense now.

看一下上面的插图。 现在应该更有意义了。

Still confused? Ask me any questions in the comment section as we go along.

还是很困惑？ 继续进行时，请在评论部分问我任何问题。

4.将文本内容放置在中心。 (4. Position the Text Content in the Center.)

Use Flexbox!

使用Flexbox！

.opening {  ...  display: flex;  justify-content: center;  align-items: center;}

5.在制作动画之前，使文字漂亮。 (5. Just Before we Animate, Make the Text Pretty.)

.opening-text {  margin: 0;  color: rgba(255,255,255,0.6);  text-transform: uppercase;  font-size: 3.6rem;  text-align: center;}

6.准备制作动画！ (6. Prepare to Animate!)

If you take a look at the final result, you’ll notice that each word in the sentence is animated into the scene. We need a way to separate the words into individual elements.

如果查看最终结果，您会注意到句子中的每个单词都被动画化为场景。 我们需要一种将单词分为单个元素的方法。

Let’s handle this with JavaScript.

让我们使用JavaScript进行处理。

In a nutshell, here’s a graphical representation of what we want to do.

简而言之，这是我们想要做的图形表示。

Now you understand the task at hand.

现在您了解了手头的任务。

And here’s the code for that. I hope you’re comfortable with some JavaScript as I’m going to throw some at you.

这是该代码。 我希望您对一些JavaScript感到满意，因为我将向您介绍一些JavaScript。

const textNode = document.querySelector('.opening-text');const splitTextArr = textNode.innerText.split(" ");

let finalMarkup = "";splitTextArr.forEach(buildMarkup);function buildMarkup(text, index) {  let spanText;

(index === 2) ?   spanText = "" + text + "
" :   spanText = "" + text + " ";    return finalMarkup += spanText;}/** Substitute the previous content for the new markup with span elements */textNode.innerHTML = finalMarkup;

It’s not too much to grasp, but I’ve gone ahead and illustrated what’s going on.

掌握的不是很多，但是我已经进行了说明。

NB: Within the buildMarkup function, I’ve gone ahead and added a <br /> tag after the third word. This will make sure the text breaks up instead of staying on one line.

注意：在buildMarkup函数中，我已经在第三个单词之后添加了<br />标签。 这将确保文本分解而不是停留在一行上。

7.编写关键帧 (7. Write the Keyframes)

@keyframes hide {    from { opacity: 1; }    to { opacity: 0; }}@keyframes glow {    from { text-shadow: 0 0 14rem white; }    to { text-shadow: 0 0 0 white; }}

There are two different animations we need for the final effect. One, the hide animation, and the other, the glow animation.

我们需要两种不同的动画来获得最终效果。 一个是hide动画，另一个是glow动画。

If you’re not conversant with how CSS animations work, getting my is a no-brainer. In a nutshell, animations are largely powered by keyframes.

如果您不熟悉CSS动画的工作方式，那么轻松学习“ 就可以了。 简而言之，动画主要由keyframes提供动力。

Within a keyframe block, you define the change in properties of an element over time.

在关键帧块中，您可以定义元素的属性随时间的变化。

See the code above. Even if you don’t know CSS animations well, I’m sure you can make a bit of sense out of it.

参见上面的代码。 即使您不太了解CSS动画，我相信您也可以从中有所了解。

8.将动画应用于元素 (8. Apply the Animations to the Elements)

.opening-text span {  opacity: 0;  animation:     hide 8s ease-in-out infinite,     glow 8s ease-in-out infinite;}

Looking good?

看起来不错？

Here’s a bit of explanation.

这里有一些解释。

The CSS text-shadow property is used to create the flash effect on the text. If you don’t know how text-shadowworks, have a look at the reference. Even though I’ve been writing CSS for years, I looked it up for a refresher, too.

CSS text-shadow属性用于在文本上创建闪光效果。 如果您不知道text-shadow工作方式，请查看参考。 即使我已经写CSS多年了，但我也一直在寻找它。

We are in this together!

我们一起做的！

9.最后，偏移动画以获得微妙的交错效果。 (9. Finally, offset the animations for a subtle staggering effect.)

.opening-text span:nth-child(6n) {    animation-delay: 900ms; }.opening-text span:nth-child(6n-1) {    animation-delay: 700ms; }.opening-text span:nth-child(6n-3) {    animation-delay: 600ms; }.opening-text span:nth-child(6n-4) {    animation-delay: 300ms; }.opening-text span:nth-child(6n-5) {    animation-delay: 0s; }

After wrapping each word in a span element, .opening-text now contains six elements. Each is targeted using the nth-child selector. Substitute n = 1 in the selectors above. You’ll get the hang of it.

将每个单词包装在span元素中之后， .opening-text现在包含六个元素。 每个对象都使用第nth-child选择器作为目标。 在上面的选择器中替换n = 1 。 您会掌握的。

I got lazy, but I’m sure if you spend some more time tweaking the values, you’ll have a prettier animation.

我很懒，但是我敢肯定，如果您花更多的时间来调整值，您将获得一个更漂亮的动画。

Yeah, we did it ?

是的，我们做到了吗？

卡在某个地方？ (Got stuck somewhere?)

Let me know in the comments, and I’ll be happy to help.

请在评论中告诉我，我们将竭诚为您服务。

准备成为专业人士了吗？ (Ready to become Pro?)

I have created a free CSS guide to get your CSS skills blazing, immediately. .

我已经创建了一个免费CSS指南，可让您立即掌握CSS技能。 。

翻译自:

ios 文本动画