超强的苹果官网滚动文字特效实现

每年的苹果新产品发布，其官网都会配套更新相应的单页翻滚产品介绍页。其中的动画特效都十分有意思，本年 iPhone 14 Pro 的介绍页不例外。

最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣，看适用简略却不知从何下手，咱们来看看：

整个动画大致是，跟着页面的向下翻滚，整个文字从无到出现，再阅历一轮突变色的变化，最终再逐步消失。

本文，就将介绍 2 种运用 CSS 完成该作用的办法。

运用 background-clip 完成

第一种办法是借助 background-clip。

background-clip：background-clip 设置元素的布景（布景图片或色彩）是否延伸到边框、内边距盒子、内容盒子下面。

而 background-clip: text 能够完成布景被裁剪成文字的前景色。运用了这个特点的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的布景即为区块的布景，文字之外的区域都将被裁剪掉。

看个最简略的 Demo ，没有运用 background-clip:text :

<div>Clip</div>
<style>
div {
  font-size: 180px;
  font-weight: bold;
  color: deeppink;
  background: url($img) no-repeat center center;
  background-size: cover;
}
</style>

作用如下：

CodePen Demo

运用 background-clip:text

咱们稍微改造下上面的代码，增加 background-clip:text：

div {
  font-size: 180px;
  font-weight: bold;
  color: deeppink;
  background: url($img) no-repeat center center;
  background-size: cover;
  background-clip: text;
}

作用如下：

看到这儿，或许有人就纳闷了，

，啥玩意呢，这不便是文字设置 color 特点嘛。

将文字设为通明 color: transparent

别急！当然还有更有意思的，上面因为文字设置了色彩，挡住了 div 块的布景，假如将文字设置为通明呢？文字是能够设置为通明的 color: transparent 。

div {
  color: transparent;
  background-clip: text;
}

作用如下：

CodePen Demo – background-clip: text

通过将文字设置为通明，本来 div 的布景就显现出来了，而文字以外的区域悉数被裁剪了，这便是 background-clip: text 的作用。

因而，对于上述作用，咱们只需要完成一个从通明到突变色到通明的突变布景即可，跟着鼠标的翻滚移动布景的 background-position 即可！

有了上面的铺垫，咱们很简单的完成上述的苹果官网的文字作用。（先不考虑翻滚的话）

看看代码：

<div class="g-wrap">
    <p>灵动的 iPhone 新玩法，迎面而来。严重的安全新功能，为解救生命而规划。立异的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为全部供给强壮原动力。  
    </p>
</div>

.g-wrap {
    background: #000;
    p {
        width: 800px;
        color: transparent;
        background: linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent);
        background-clip: text;
        background-size: 100% 400%;
        background-position: center 0;
        animation: textScroll 6s infinite linear alternate;
    }    
}
@keyframes textScroll {
    100% {
        background-position: center 100%;
    }
}

咱们这儿核心的便是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) 这个突变布景，完成一个从通明到突变色到通明的突变布景，合作了 background-clip: text。

再利用动画，控制布景的 background-position，这样一个文字渐现再渐隐的文字动画就完成了：

CodePen Demo — iPhone 14 Pro Text Animation | background-clip: text

运用 mix-blend-mode 完成

上面一种办法很好，这儿再介绍别的一种运用混合形式 mix-blend-mode 完成的办法。

假设，咱们先完成这样一幅黑底白字的结构：

<div class="text">灵动的 iPhone 新玩法，迎面而来。严重的安全新功能，为解救生命而规划。立异的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为全部供给强壮原动力。
</div>

.text {
    color: #fff;
    background: #000;
}

再别的完成这样一个突变布景，从黑色到突变色（#ffb6ff 到 #b344ff）到黑色的突变色：

<div class="g-wrap">
    <div class="text">灵动的 iPhone 新玩法，迎面而来。严重的安全新功能，为解救生命而规划。立异的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为全部供给强壮原动力。
        <div class="bg"></div>
    </div>
</div>

.text {
    position: relative;
    color: #fff;
    background: #000;
}
.bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 400%;
    background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);
}

.bg 大概是长这样，相对于 .text 而言，其高度是其 4 倍：

这两个图形叠加在一起会是咋样？应该不会有太多化学反应：

咱们给 .bg 加上一个上下移动的动画，咱们看看作用：

好像没什么东西？文字也被挡住了。可是！假如在这儿，咱们运用上混合形式，那作用就完全不一样了，这儿，咱们会运用到 mix-blend-mode: darken。

.bg {
    //...
    mix-blend-mode: darken
}

再看看作用：

Wow，借助不同的混合形式，咱们能够完成不同的色彩叠加作用。这儿 mix-blend-mode: darken 的作用是，只要白色文字部分会显现出上层的 .bg 的色彩，而黑色布景部分与上层布景叠加的色彩依旧为黑色，与 background-clip: text 有异曲同工之妙。

再简略的借助 overflow: hidden，裁剪掉 .text 元素外的布景移动，整个动画就完成了。

完好的代码如下：

<div class="g-wrap">
    <div class="text">灵动的 iPhone 新玩法，迎面而来。严重的安全新功能，为解救生命而规划。立异的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为全部供给强壮原动力。
        <div class="bg"></div>
    </div>
</div>

.g-wrap {
    width: 100vw;
    height: 100vh;
    background: #000;
    .text {
        position: relative;
        color: transparent;
        color: #fff;
        background: #000;
        overflow: hidden;
    }    
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 400%;
        background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff 30%, #ffb6ff, #b344ff, #b344ff 70%, #000 75%, #000);
        mix-blend-mode: darken;
        animation: textScroll 6s infinite linear alternate;
    }
}
@keyframes textScroll {
    100% {
        transform: translate(0, -75%);
    }
}

这样，借助混合形式，咱们也完成了标题的文字特效：

CodePen Demo — iPhone 14 Pro Text Animation | mix-blend-mode

结合翻滚完成动画

当然，原动画的完成是结合页面的翻滚完成的。

在之前，我介绍了 CSS 最新的特性 @scroll-timeline，比如这两篇文章：

• 革命性立异，动画杀手锏 @scroll-timeline
• 超酷炫的转场动画？CSS 轻松拿下！

@scroll-timeline 能够设定一个动画的开端和完毕由翻滚容器内的翻滚进度决议，而不是由时间决议。

意思是，咱们能够定义一个动画作用，该动画的开端和完毕能够通过容器的翻滚来进行控制。

可是！伤心的是，这个如此好的特性，最近已经被规范废弃，已经不再引荐运用了：

这儿，咱们运用传统的办法，那就必须得借助了 JavaScript 了，JavaScript 结合翻滚的部分不是本文的要点，对于页面翻滚合作动画时间轴，咱们通常会运用 GSAP。

咱们结合上述的混合形式的办法，很简单得到结合页面翻滚的完好代码：

<div class="g-wrap">
    <div class="text">灵动的 iPhone 新玩法，迎面而来。严重的安全新功能，为解救生命而规划。立异的 4800 万像素主摄，让细节纤毫毕现。更有 iPhone 芯片中的速度之王，为全部供给强壮原动力。
        <div class="bg"></div>
    </div>
</div>
<div class="g-scroll"></div>

.g-wrap {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    background: #000;
    .text {
        position: relative;
        width: 800px;
        color: #fff;
        background: #000;
        overflow: hidden;
    }    
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 400%;
        background: linear-gradient(-3deg, #000, #000 25%, #ffb6ff, #b344ff, #000 75%, #000);
        mix-blend-mode: darken;
    }
}
.g-scroll {
    position: relative;
    width: 100vw;
    height: 400vw;
}

gsap.timeline({
    scrollTrigger: {
        trigger: ".g-scroll",
        start: "top top",
        end: "bottom bottom",
        scrub: 1
    }
}).fromTo(".bg", { y: 0 }, { y: "-75%" }, 0);

能够看到，唯一的不同之处，便是利用了 gsap.timeline 结合翻滚容器，触发动画。

作用如下：

CodePen Demo — iPhone 14 Pro Text Animation | GSAP

最终

好了，本文到此完毕，希望本文对你有所帮助 :)

更多精彩 CSS 技术文章汇总在我的 Github — iCSS ，持续更新，欢迎点个 star 订阅收藏。

假如还有什么疑问或者主张，能够多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。