滚动文字特效实现

介绍

苹果官网滚动文字特效模仿实现

滚动文字特效效果

整个动画大致是，随着页面的向下滚动，整个文字从无到出现，再经历一轮渐变色的变化，最后再逐渐消失。

查看实现效果 (opens new window)

使用 background-clip 实现

• background-clip：background-clip 设置元素的背景（背景图片或颜色）是否延伸到边框、内边距盒子、内容盒子下面。
  • 通过 background-clip: text 可以实现背景被裁剪成文字的前景色。使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。
  • 再通过color: transparent 通过将文字设置为透明，配合background-clip: text把原本 div 的背景就显现出来了，而文字以外的区域全部被裁剪了，这就是 background-clip: text 搭配color: transparent 的作用。
  • 因此，对于上述效果，我们只需要实现一个从透明到渐变色到透明的渐变背景即可，随着鼠标的滚动移动背景的 background-position 即可！

<template>
  <div>
    <div class="iPhone-box">
      <div class="iPhone-text">
        灵动的 iPhone
        新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800
        万像素主摄，让细节纤毫毕现。更有 iPhone
        芯片中的速度之王，为一切提供强大原动力。
        <div class="bg" />
      </div>
    </div>
    <div class="g-scroll" />
  </div>
</template>

<style lang="scss" scoped>
.iPhone-box {
  font-size: 48px;
  .iPhone-text {
    width: 100%;
    background: linear-gradient(
      -4deg,
      transparent,
      transparent 25%,
      #ffb6ff,
      #b344ff,
      transparent 75%,
      transparent
    );
    background-clip: text;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    color: transparent;
    background-size: 100% 600%;
    background-position: center 0%;
    animation: textScroll 5s infinite linear alternate; // infinite无限循环 linear线性动画 alternate交替动画(循环动画 往返效果)
  }
}

@keyframes textScroll {
  100% {
    background-position: center 100%;
  }
}
</style>

• 我们这里核心的就是借助了 linear-gradient(-4deg, transparent, transparent 25%, #ffb6ff, #b344ff,transparent 75%, transparent) 这个渐变背景，实现一个从透明到渐变色到透明的渐变背景，配合了 background-clip: text。

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

使用 mix-blend-mode 实现

• 把文字的背景设置为黑色 再通过mix-blend-mode: darken (opens new window) 黑色混合模式，我们可以实现不同的颜色叠加效果
  • 这里 mix-blend-mode: darken 的作用是，只有白色文字部分会显现出上层的 .bg 的颜色，而黑色背景部分与上层背景叠加的颜色仍旧为黑色，与 background-clip: text 有异曲同工之妙。
  • 再简单的借助 overflow: hidden，裁剪掉 .text 元素外的背景移动，整个动画就实现了。

<template>
  <div>
    <div class="iPhone-box">
      <div class="iPhone-text">
        灵动的 iPhone
        新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800
        万像素主摄，让细节纤毫毕现。更有 iPhone
        芯片中的速度之王，为一切提供强大原动力。
        <div class="bg" />
      </div>
    </div>
    <div class="g-scroll" />
  </div>
</template>

<style lang="scss" scoped>
.iPhone-box {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-size: 48px;
  background: #000;
  .iPhone-text {
    position: relative;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    text-align-last: justify;
    .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
      );
      animation: textScroll 6s infinite linear alternate;
      mix-blend-mode: darken; // 设置背景 混合模式
      z-index: 1;
    }
  }
}
@keyframes textScroll {
   100% {
     transform: translate(0, -75%);
   }
 }
.g-scroll {
  width: 100vw;
  height: 100vw;
}
</style>

• 这样，借助混合模式，我们也实现了题目的文字特效：

通过gsap实现滚动效果

• 利用.timeline (opens new window)时间轴 结合scrollTrigger() (opens new window) 滚动触发插件，滚动时触发.fromTo (opens new window)动画 实现页面滚动文字特效

<template>
<!-- 放在统一跟节点 防止暴露在了最外层 -->
  <div>
    <div class="iPhone-box">
      <div class="iPhone-text">
        灵动的 iPhone
        新玩法，迎面而来。重大的安全新功能，为拯救生命而设计。创新的 4800
        万像素主摄，让细节纤毫毕现。更有 iPhone
        芯片中的速度之王，为一切提供强大原动力。
        <div class="bg" />
      </div>
    </div>
      <!-- 设置一个很长的盒子 撑起页面形成滚动条 -->
    <div class="g-scroll" />
  </div>
</template>
<script lang="ts" setup>
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { onMounted } from 'vue'
// 导入gsap ScrollTrigger插件 用于滚动动画 详细文档请查看 https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger#modules
gsap.registerPlugin(ScrollTrigger)
onMounted(() => {
  gsap
    .timeline({
      scrollTrigger: {
        trigger: '.g-scroll', // gsap滚动动画触发器
        start: 'top top', // 开始位置 开始位置为滚动条滚动到触发器顶部时
        end: 'bottom bottom', // 结束位置 结束位置为滚动条滚动到触发器底部时
        scrub: 1 // 滚动动画的速度 类似于过度效果
      }
    })
    .fromTo('.bg', { translateY: 0 }, { translateY: '-75%' }, 0) // translateY 为垂直方向的位移 从0位移到-75%
})
</script>
<script lang="ts">
export default {
  name: 'CssText'
}
</script>
<style lang="scss" scoped>
.iPhone-box {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  font-size: 48px;
  background: #000;
  .iPhone-text {
    position: relative;
    overflow: hidden;
    max-width: 1400px;
    margin: 0 auto;
    text-align-last: justify;
    .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
      );
      // animation: textScroll 6s infinite linear alternate;
      mix-blend-mode: darken; // 设置背景 混合模式
      z-index: 1;
    }
  }
}
// @keyframes textScroll {
//   100% {
//     transform: translate(0, -75%);
//   }
// }
.g-scroll {
  width: 100vw;
  height: 100vw;
}
// .iPhone-box {
//   font-size: 48px;
//   .iPhone-text {
//     width: 100%;
//     background: linear-gradient(
//       -4deg,
//       transparent,
//       transparent 25%,
//       #ffb6ff,
//       #b344ff,
//       transparent 75%,
//       transparent
//     );
//     background-clip: text;
//     -webkit-background-clip: text;
//     -moz-background-clip: text;
//     color: transparent;
//     background-size: 100% 600%;
//     background-position: center 0%;
//     animation: textScroll 5s infinite linear alternate; // infinite无限循环 linear线性动画 alternate交替动画(循环动画 往返效果)
//   }
// }

// @keyframes textScroll {
//   100% {
//     background-position: center 100%;
//   }
// }
</style>

参考文献

超强的苹果官网滚动文字特效实现 (opens new window)

CodePen Demo -- iPhone 14 Pro Text Animation | GSAP: (opens new window)