滚动页面时如何从元素更改文本

如何解决滚动页面时如何从元素更改文本

我想学习如何制作这样的效果https://www.apple.com/br/airpods-pro/。

更准确地说：GIF showing text change I want to do - only text change

我已经在vue上使用AOS动画进行了类似的操作，但是我不知道如何在air-pods-pro页面上使其更接近这种效果 https://imgur.com/a/d4ttb5V

在我的vue组件中的代码上方：

<script>
import AOS from 'aos';
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.esm.browser.js';

Vue.use(AOS);

AOS.init();

export default {
  name: 'Home',options: {
    duration: 800,easing: [1,1],loopBottom: true,},props: {
    messages: {
      type: Array,default: () => [],primaryColor: {
      type: String,required: true,default: 'pink',secondaryColor: {
      type: String,default: 'black',data: () => ({
    sections: [
      {
        id: 1,any_data: "I'm section 1",img_url: './images/whatever01.jpg',{
        id: 2,any_data: "I'm section 2",img_url: './images/whatever02.jpg',{
        id: 3,any_data: "I'm section 3",img_url: './images/whatever03.jpg',],}),};
</script>
<style lang="stylus">

ol,li
  list-style: none;
  padding-left: 5px;

.home-phrases
  text-align: center;
  color: $white;

.sections-menu
  right: 1rem;
  top: 50%;

.fullpage
  height: 80vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

</style>
<template>
<section class="home-bg">
  <div class="container">
    <div class="row">
        <ol>
        <section v-bind:key="msg" v-for="msg in messages" class="fullpage">
          <li class="home-phrases">
            <h2
              data-aos="fade-up"
              data-aos-anchor-placement="bottom-bottom"
              data-aos-delay="20"
              data-aos-duration="1000">{{ msg }}</h2>
          </li>
        </section>
        </ol>
    </div>
  </div>
</section>
</template>