当前位置:主页 > JavsScript库 > 动画 >

使用SVG和JavaScript改变文本效果
栏目分类:动画   发布日期:2021-09-14   浏览次数:

该项目利用 JavaScript SVG 过滤器来创建“变形文本”效果。

它将 2 个文本元素叠加在一起,并根据哪个文本元素应该更明显来模糊它们。

一旦应用了模糊,两个文本就会一起通过阈值过滤器,从而产生“粘糊糊”的效果。

使用:

1. 在页面上创建两个文本容器。

<div id="container">
  <span id="text1"></span>
  <span id="text2"></span>
</div>

2. 创建一个用于创建变形效果的 SVG 过滤器。

<svg id="filters">
  <defs>
    <filter id="threshold">
      <!-- Basically just a threshold effect - pixels with a high enough opacity are set to full opacity, and all other pixels are set to completely transparent. -->
      <feColorMatrix in="SourceGraphic"
          type="matrix"
          values="1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 255 -140" />
    </filter>
  </defs>
</svg>

3. 核心样式表。

#container {
  filter: url(#threshold) blur(0.6px);
}

4. 主要启用文字变形效果的JavaScript。不要忘记替换您想要变形的文本:

const elts = {
  text1: document.getElementById("text1"),
  text2: document.getElementById("text2") 
};
// 要在其间变形的字符串。您可以将这些更改为您想要的任何内容!
const texts = [
      "JavaScript",
      "CSS",
      "HTML",
      "jQuery",
      "Angular",
      "React",
      "Vue"
];
// 控制变形速度。
const morphTime = 1;
const cooldownTime = 0.25;
let textIndex = texts.length - 1;
let time = new Date();
let morph = 0;
let cooldown = cooldownTime;
elts.text1.textContent = texts[textIndex % texts.length];
elts.text2.textContent = texts[(textIndex + 1) % texts.length];
function doMorph() {
  morph -= cooldown;
  cooldown = 0;
  let fraction = morph / morphTime;
  if (fraction > 1) {
    cooldown = cooldownTime;
    fraction = 1;
  }
  setMorph(fraction);
}
// 这里发生了很多神奇的事情,这就是将模糊过滤器应用于文本的原因。
function setMorph(fraction) {
  // fraction = Math.cos(fraction * Math.PI) / -2 + .5;
  elts.text2.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  elts.text2.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
  fraction = 1 - fraction;
  elts.text1.style.filter = `blur(${Math.min(8 / fraction - 8, 100)}px)`;
  elts.text1.style.opacity = `${Math.pow(fraction, 0.4) * 100}%`;
  elts.text1.textContent = texts[textIndex % texts.length];
  elts.text2.textContent = texts[(textIndex + 1) % texts.length];
}
function doCooldown() {
  morph = 0;
  elts.text2.style.filter = "";
  elts.text2.style.opacity = "100%";
  elts.text1.style.filter = "";
  elts.text1.style.opacity = "0%";
}
// 动画循环,每帧调用一次。
function animate() {
  requestAnimationFrame(animate);
  let newTime = new Date();
  let shouldIncrementIndex = cooldown > 0;
  let dt = (newTime - time) / 1000;
  time = newTime;
  cooldown -= dt;
  if (cooldown <= 0) {
    if (shouldIncrementIndex) {
      textIndex++;
    }
    doMorph();
  } else {
    doCooldown();
  }
}
// 开始动画。
animate();

官方网站:https://codepen.io/Valgo/pen/PowZaNY

相关热词: 文本效果文字动画

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库