スクロールテキスト（途中で色が変化する）

デモ

See the Pen scroll text2 by logsuke (@design-list) on CodePen.

コード

<section id="section1" class="section">
              
               <div class="scroll">
                    <div class="left">
                         <p>     Lorem ipsum dolor sit amet.       </p>
                    </div>
                    <div class="right">
                         <p>     Lorem ipsum dolor sit amet.       </p>
                    </div>
               </div>
          </section>

===Base===* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
}

:root {
     --nav-height: 8rem;
     --max-width: 1200px;
     --container-padding: 0 4rem;
     --gap: 5rem;
     --bg-color: rgb(240, 240, 240);
     --first-color: rgb(172, 245, 255);
     --text-color: rgb(77, 77, 77);
}


/*=== Font ratio ===*/

html {
     scroll-behavior: smooth;
     font-size: 62.5%;
}

body {
     font-size: 1.6rem;
}

ul {
     list-style: none;
}

a {
     text-decoration: none;
     color: var(--text-color);
}

/*=== section ===*/

.section {
     min-height: 100vh;
     margin: 0 auto;
     padding-top: var(--nav-height);
     position: relative;
}


.scroll .left {
     overflow: hidden;
     position: absolute;
     top: 0;
     left: 0;
     width: 50%;
     height: 100%;
}

.scroll .right {
     overflow: hidden;
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
     height: 100%;
}

.scroll .left p {
     position: absolute;
     white-space: nowrap;
     font-size: 12rem;
     line-height: 100vh;
     width: auto;

     -webkit-text-stroke: 2px;
     -webkit-text-stroke-color: #000;
     -webkit-text-fill-color: transparent;
     left: 200%;
}

.scroll .right p {
     position: absolute;
     white-space: nowrap;
     font-size: 12rem;
     line-height: 100vh;
     width: auto;
     left: 100%;
}

.scroll p {
     animation: animate 10s linear infinite;
}

@keyframes animate {
     0% {
          transform: translateX(0);
     }

     100% {
          transform: translate(-300%);
     }
}