#3 Tailwind CSS 4.0,以及滚动显示文本动画

Author

Yi Ding
January 24, 2025 • Estimated Reading Time: 4 minutes

INTRO

Tailwind CSS 4.0 终于发布了，可以不需要 config 配置文件了，还有几点更新是比较满意的：

  • 简化安装和配置：只需三个步骤即可完成，且不需要额外的配置和插件。

  • 内置导入支持：不再需要额外的插件来处理 @import 规则，Tailwind CSS v4.0 内置了这一功能。

  • 现代化的 P3 颜色调色板：默认颜色调色板从 rgb 升级到 oklch，提供了更鲜艳的颜色。

  • 扩展的渐变 API：提供了更多的渐变特性，包括线性渐变角度、渐变插值模式、圆锥和径向渐变等。

  • starting-style 支持：引入了 starting 变体，支持 CSS @starting-style 特性，允许在元素首次显示时进行过渡动画。

上周得了流感停刊一次，年前最后一期，大家年后见！

LEARN SOMETHING

最近经常看到这种或类似的效果，滚动时文本逐个单词显示出来，利用 Motion 几行代码就可以实现，如果使用 Framer 自带的文本工具可能更容易，不过还没有尝试。

'use client';
import { useScroll, useTransform, motion } from 'motion/react';
import { useRef } from 'react';

export function Text2() {
  //useScroll hook 用于监控元素的滚动进度，offset 配置定义了动画的触发范围：从元素顶部到视口底部开始，到元素底部到视口顶部结束
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start'],
  });
  
  //创建一个函数来转换滚动进度为不透明度, 每个词都会从 0.3 的不透明度渐变到 1
  const createWordOpacity = (start: number, end: number) =>
    useTransform(scrollYProgress, [start, end], [0.3, 1]);

  return (
    <div className='relative h-[300vh]'>
      <div className='flex flex-col items-center space-y-8' ref={ref}>
        {[
          'Effortless Creation: Transform ideas into stunning visuals with just a few words. Our AI understands context and nuance, bringing your imagination to life. Generate professional-quality visuals without complex software or design experience.',
          'Limitless Imagination: Explore infinite creative possibilities with cutting-edge AI. Our platform adapts to your needs, offering an ever-expanding universe of visual concepts. Push boundaries with genre-blending compositions and futuristic concepts.',
        ].map((text, index) => (
           <motion.div
             key={index}
             className='text-xl font-medium text-black dark:text-white'
           >
//核心动画效果，将每段文本分割成单词，为每个单词计算独特的动画时间范围，使用 motion.span 为每个单词添加动画效果

                {text.split(' ').map((word, wordIndex, array) => {
                  const start = index * 0.3 + (wordIndex / array.length) * 0.3;
                  const end = start + (1 / array.length) * 0.3;
                  return (
                    <motion.span
                      key={wordIndex}
                      style={{ opacity: createWordOpacity(start, end) }}
                      className='mr-1 inline-block'
                    >
                      {word}
                    </motion.span>
                  );
                })}
           </motion.div>
         ))}
      </div>
    </div>
  );
}
RESOURCES

最近很火的前端项目，它其实就是把各家开源的动效组件库聚合在一起了，从口号 The NPM for Design Engineers 也可以看出来，创新的点在于可以把代码一键拷贝到 V0 等 AI 编程平台。如果说 Craftwork 是给设计师用的素材平台，那么以后会有越来越多类似的 21st 这样的设计工程师素材平台出现的。

另一个基于 React 的动效组件库，很多效果也很不错。

和上面那个差不多，不过效果差点，内容也没那么多。

免费且开源的 web 背景素材平台，提供多种现代化和科技感的背景图案，每种模式都可以通过预览和复制 CSS 代码快速应用。

CASE STUDY

很喜欢这位设计工程师的个人网站，充满了各种有趣的细节。

另一位大神的网站，ertdfgcvb 是一个专注于设计和编程的工作室，主要专长包括程序化图形和动画、研究与开发、硬件原型设计、交互式装置以及实时可视化。

DELIGHTFUL MOTION

有人把美元纸币做成了响应式设计，不知道有没有人挑战一下 rmb？

ARTICLES

本文主要介绍了在 next.js 中三种主要方法自定义元数据。

CSS 中文本换行平衡的新特性，主要介绍了 text-wrap: balance 和 text-wrap: pretty 两个属性。这些属性可以帮助开发者更好地控制文本换行，使文本看起来更加美观和易读。text-wrap: balance 会尝试平衡文本行的长度，而 text-wrap: pretty 则更加温和，主要处理孤立的单词。

PRODUCTS

除了那些开源的前端动效可以直接拿来用，如果你想学习更有创意更高级的动效，现在有一些平台基于 GSAP 也推出了类似的项目，不过并不免费。

另一个刚刚上线的，以会员订阅制来教你做高级动画，目前 499 € 买断永久版。

一个简单的 API 服务，可以为任何网站获取（OG）元数据。用户只需在 URL 前加上 og.metadata.vision 前缀，就能快速获取网站的标题、描述、图片、图标等关键信息。

OTHERS

Love this newsletter?

Reply

or to participate.