DEV Community
·
使用Trig.js实现固定旋转文本和动态增长下划线
💡
原文英文，约400词，阅读约需2分钟。
📝
内容提要
本文介绍了如何使用Trig.js实现固定文本效果，文本在滚动时旋转，并且下划线动态增长。通过HTML和CSS设置，使用.position: sticky;保持文本固定，.rotate类根据滚动位置应用旋转效果。Trig.js轻量且可高度定制，适合滚动动画。
🎯
关键要点
- 本文介绍了如何使用Trig.js实现固定文本效果，文本在滚动时旋转，并且下划线动态增长。
- 使用.position: sticky;保持文本固定，.rotate类根据滚动位置应用旋转效果。
- Trig.js轻量且可高度定制，适合滚动动画。
- HTML部分设置了基本结构，包括引入Trig.js和字体样式。
- CSS部分定义了文本样式和动态效果，包括背景、字体和下划线的样式。
- 通过.pinned类保持文本固定，.rotate类根据滚动位置应用旋转效果。
- 使用data-trig属性启用Trig.js动画。
- Trig.js的优点包括轻量、无依赖和高度可定制。
- 示例展示了Trig.js在基于滚动的动画中的简单性和强大功能。
❓
延伸问答
如何使用Trig.js实现固定旋转文本效果？
通过使用.position: sticky;保持文本固定，并使用.rotate类根据滚动位置应用旋转效果。
Trig.js的主要优点是什么？
Trig.js轻量（仅4KB）、无依赖且高度可定制，适合滚动动画。
如何设置动态增长的下划线效果？
通过在#title:after中使用transform: scaleX(calc(var(--trig) - 13%));来实现下划线的动态增长。
在HTML中如何引入Trig.js？
在HTML中通过<script src='https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js'></script>引入Trig.js。
如何在CSS中定义文本样式和动态效果？
在CSS中定义文本样式，包括背景、字体和下划线的样式，使用相应的类进行样式设置。
Trig.js适合什么类型的动画？
Trig.js适合用于滚动动画，能够实现平滑的滚动效果。
➡️
