如何实现Web上文字的渐入效果

每当苹果官网发布新产品的时候，都会给我们带来眼前一亮的设计。

今天我们来实现上面视频中的文字渐入效果。

首先将需要展示的文字输入标题内（此处省略基本格式）。

HTML:

进入CSS文件，将背景调成黑色，外边距设为0，高度设为300vh。

CSS:

先设置标题格式，字体设置为Arial，margin\padding设置为0，字体设置为48px，颜色为白色，字符间距为-0.5px。创建一个弹性盒子Flex，以确保文字在空间内的正确布局，将盒子内的文字元素居中排列并设置在布局中心。

接着给文字设置一个元素背景图像，使用linear-gradient函数，实现三种颜色的线性渐变，设置角度为60deg，渐变颜色分别为： 第一段（0~33%）纯白色 第二段（33%~66%）从透明度1降到0的纯白色 第三段（66%-100%)完全透明的纯白色。

将这个渐变的白色背景图像，做一个高度不变、宽度3倍的拉伸。

并设置背景裁剪方式为文字裁剪，文字颜色设置为透明。

CSS代码如下：

在HTML内添加区域div，将标题文字包裹进去，命名为sticky。在CSS内设置一个元素定位类型：sticky （粘性定位），距离顶部设置为0，高度为100vh，创建弹性盒子Flex，将h1内 的 justify-content: center;和align-items: center;（居中排列和中心设置）移至sticky元素内。（注意此处使用align-items函数而非align-content，因为align-items适用与单行文字，而后者适用于多行文字且单行文字无效）

HTML代码如下：

CSS代码如下：

现在我们来完成脚本效果，我们要实现文字通过滑轮而产生渐入效果，等于是将这个渐变色图像从左向右拉并以滑轮的滑动来实现文字渐入效果。设置常量 h1，通过查找选择器，来获取CSS中的元素h1，在文档中添加事件滑块，并为其引用外部函数，将scrolled的值设置为窗口顶部的距离减去滑块总高度与窗口滑块高度的差。设置标题样式属性为–percentage，动态赋值为（scrolled * 100）%，因为scrolled的值是0~1之间的小数，将它赋值为百分比，方便我们在CSS内为其进行计算。

JS代码：

用calc函数来计算渐变色背景的动态长度值，使其完成对透明标题的动态覆盖效果，从而产生渐入文字效果。

在CSS-h1下添加代码如下

最终效果：

文字渐入效果