<body>
  <section class="content">
    <div>
      <h2 class="text-black">
        今回は画像とbackgroundの境目で <br>
        左右の色を変更する方法やってみた。
      </h2>
    </div>
    <div>
      <h2 class="text-white">
        今回は画像とbackgroundの境目で <br>
        左右の色を変更する方法やってみた。
      </h2>
    </div>
  </section>
</body>

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


section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 100vh;
  display: flex;
  margin: auto;
  overflow: hidden;
}

section div {
  position: relative;
  width: 50%;
  background: #b6d67f;
  overflow: hidden;
}

section div h2 {
  position: absolute;
  white-space: pre;
  font-size: 40px;
  font-weight: bold;
  animation: animate 5s linear infinite;
}

@keyframes animate {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 折り返し位置の指定 */
    transform: translateX(-55%);
  }
}

section div:nth-child(2) {
  position: absolute;
  width: 60%;
  background: pink;
  background-size: cover;
  overflow: hidden;
  height: 80vh;
  margin-top: 43px;
  right: 0;
}

.text-black {
  color: black;
  top: 25%;
  /* ここで文字の最初指定 */
  left: 60%;
}
.text-white {
  color: #ffffff;
  top: 25%;
  /* ここで文字の最初指定 */
  left: -17%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.