首页 > web前端 > js教程 > 模仿用笔突出显示文本

模仿用笔突出显示文本

WBOY
发布: 2024-07-18 09:50:59
原创
1025 人浏览过

Imitation of highlighting text with a pen

此代码笔的灵感来自 Sten Hougaard 的作品

准备工作

让我们为不同的动画实现创建两个容器:

<div class="container">
 <h1>Animated text
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

<div class="container">
 <h1 id="clickable-header">Click on me!
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>
登录后复制

我用Adobe illustrator制作了svg,它的主要特点一定是高度小、宽度大。
值得一提的是,svg 是 header 元素的子元素,因为我们将相对于它定位 svg。

CSS

我们将容器转变为弹性盒,以优雅地将所有内容放置在中心。

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   
登录后复制

内联用于简单地将元素的宽度减小到其内容,因为 svg 将依赖它

接下来,我们应该相对于标题定位 svg:

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}
登录后复制

我们使用标准方法将相对元素定位在父元素的中心。要将 svg 调整为文本,我们应该应用 min-width 和 min-height。

使用 JavaScript 的动画逻辑

要在 JavaScript 中对元素进行动画处理,我们可以使用精彩的 animate(keyframes, options) 方法。

关键帧

让我们剖析一下 getDrawingParameters 函数,它提供了要迭代的属性:

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};
登录后复制

首先,我们需要使用 svg 方法 getTotalLength:
知道我们的路径实际有多长

const length = path.getTotalLength();
登录后复制

现在,我们应该使用计算出的长度来模拟绘图。让我们定义我们的起点。我们需要属性 linesDasharray:

path.style.strokeDasharray = length;
登录后复制

在这里,我们告诉这个属性以一个破折号(大小=长度)和一个间隙(大小=长度)交替来绘制路径。


下一个属性,我们需要的长度是行程-dashoffset

path.style.strokeDashoffset = length;
登录后复制

该值表明破折号数组计算是按长度值拉动的。由于我们将破折号数组设置为“dash-length、gap-length、dash-length、gap-length ...”,起始路径将为空(间隙)。


因此,我们在数组中定义可迭代属性:

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
登录后复制

我们使用 offset 来定义必须达到该属性的相对时间。它是为了模仿每次迭代的延迟。

选项

animate 方法的第二个参数是选项:

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);
登录后复制

我们将动画设置为无限迭代和 10 秒持续时间。还记得偏移量吗?我们的“活动”动画只需要 1.5 秒。

以上是模仿用笔突出显示文本的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板