css动画效果淡入_使用Web动画API创建单词淡入效果

最新推荐文章于 2024-09-11 20:31:47 发布

cungui5726

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量173

点赞数

文章标签： css javascript js html python ViewUI

原文链接：https://thenewcode.com/1178/Create-a-Word-Fade-In-Effect-Using-the-Web-Animation-API

版权

css动画效果淡入

Recently I’ve been exposed to several examples of word fade-in effects on the web, reflecting the kind of visual effect you might associate with certain kinds of fantasy or suspense films. So far the solutions I’ve seen have all required a lot of markup and some heavy lifting with frameworks, but I realised that the effect could easily be recreated with JavaScript and the Web Animation API:

最近，我在网络上接触了几个单词淡入效果的示例，反映了您可能与某些幻想或悬念电影相关的视觉效果。到目前为止，我所看到的解决方案都需要大量标记，并且需要使用框架进行一些繁重的工作，但是我意识到可以使用JavaScript和Web Animation API轻松地重新创建效果：

标记 (Mark)

We have to start with some markup: that way (because we’re building the effect progressively), if the JavaScript fails to execute for any reason, the user will still be able to read the text. I’ll use a combined <blockquote>, <q> and <cite> tag to achieve this:

我们必须从一些标记开始：这样(因为我们正在逐步构建效果 )，如果JavaScript由于任何原因无法执行，则用户仍然可以阅读文本。我将结合使用<blockquote> ， <q>和<cite>标记来实现此目的：

<blockquote>
    <q>What we think, we become.</q>
    <cite>Gautama Buddha</cite>
</blockquote>

组 (Set)

The basic typesetting is achieved with CSS:

基本的排版是通过CSS实现的：

blockquote {
  font-size: 3rem;
}
cite {
  display: block;
  text-align: right;
  font-family: Verdana, Arial, sans-serif;
  margin-top: 1rem;
  font-size: .9rem;
  color: #aaa;
  font-style: normal;
}
blockquote q {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: .1rem;
}

One nice aspect of the <q> element is that the quotes before and after the element can be customized with CSS. Rendering these as pseudo elements means that they are not counted as part of the original HTML string:

<q>元素的一个不错的方面是，可以使用CSS自定义元素前后的引号。将它们呈现为伪元素意味着它们不算作原始HTML字符串的一部分：

q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
    margin-right: .8rem;
}
q:after {
  content: close-quote;
}
q:before, q:after {
  color: #ccc;
  font-size: 4rem;
}

The JavaScript we’ll add in a moment will surround each word with a  element. The following CSS will be applied to those elements only if the JavaScript works; if it doesn’t, the HTML will solely be affected by the CSS we’ve written so far.

稍后我们将添加JavaScript将用元素包围每个单词。仅当 JavaScript有效时，以下CSS才会应用于这些元素。否则，HTML将仅受我们到目前为止编写CSS的影响。

blockquote q span { 
  will-change: opacity, filter;
  opacity: 0;
  filter: blur(0px);
}

will-change is an alert to the browser’s rendering engine that certain properties - opacity and a blur filter, in this case - will be animated, allowing it to prepare for and optimize the animation to come.

will-change浏览器的渲染引擎发出警报，告知某些属性(在这种情况下为opacity和模糊滤镜)将被动画化，从而使其可以为即将到来的动画做准备和优化。

走 (Go)

The script, added to the bottom of the page, is divided into three functions: a random number generator, a function that splits up the content of the quote into separate words and surrounds them with  tags, and the animation. I’ll start with the second function:

添加到页面底部的脚本分为三个功能：随机数生成器，将报价内容拆分成单独的单词并用标签包围的函数和动画。我将从第二个功能开始：

function splitWords() {
  let quote = document.querySelector("blockquote q"),
  quotewords = quote.innerText.split(" "),
  wordCount = quotewords.length;
  quote.innerHTML = "";
  for (let i=0; i < wordCount; i++) {
    quote.innerHTML += "<span>"+quotewords[i]+"</span>";
    if (i < quotewords.length - 1) {
      quote.innerHTML += " ";
    }
  }
  quotewords = document.querySelectorAll("blockquote q span");
  fadeWords(quotewords);
}

The one slightly unusual part of the script is the test of i against the number of words in the quote at the end; that’s so that each of the reconstituted words in the quote has a space after except for the last word.

脚本的一个不寻常的部分是对结尾处引号中的单词数进行i检验；这样一来，引号中的每个重组词除最后一个词外，后面都有一个空格。

The array of words is passed to the fadeWords function, which uses the following:

单词数组将传递给fadeWords函数，该函数使用以下内容：

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

The fadeWords function itself:

fadeWords函数本身：

function fadeWords(quotewords) {
  Array.prototype.forEach.call(quotewords, function(word) {
    let animate = word.animate([{
      opacity: 0,
      filter: "blur("+getRandom(2,5)+"px)"
    }, {
      opacity: 1,
      filter: "blur(0px)"
    }], 
    { 
      duration: 1000,
      delay: getRandom(500,3300),
      fill: "forwards"
    } 
   )
  })
}

Each  element is brought from an opacity of 0 and a random blur to full opacity and no blur. The animation of these elements lasts one second, but each has a random delay, meaning that word starts its animation at a different time (or at least is likely to do so).

每个元素都从不opacity 0和随机blur变为完全不透明且没有模糊。这些元素的动画持续一秒钟，但每个元素都有一个随机delay ，这意味着单词在不同的时间开始动画 (或至少有可能这样做)。

Everything is started with a call to splitWords at the end of the script:

一切都始于脚本结尾处对splitWords的调用：

splitWords();

Of course, this could be taken even further: you could fade in each word sequentially (by incrementally adding the delay on each word), or even preferentially (by adding  elements with different classes around certain words, and having the script pick up on that). I leave the rest to your imagination…

当然，这甚至可以走得更远：您可以按顺序淡入淡出每个单词(通过逐渐增加每个单词的延迟)，甚至可以优先淡入淡出(通过在某些单词周围添加具有不同类的元素，然后选择脚本) )。我把剩下的事留给你想象...