애니메이션 Tips 세트

웹 제작 현장에서 사용되는 애니메이션

웹 제작 현장에서 LP와 고릴라 애니메이션의 장면이 매우 많기 때문에 사용하는 애니메이션을 연작할 것이다

이미지 중첩 부분의 문자 색상 수정(가로 스크롤 없음)

DEMO

■개요
이미지에 문자를 중첩하여 이미지와 중첩된 부분의 문자 색상을 변경합니다.
무한 가로 스크롤.
■ 설명
• 이미지에 텍스트 중첩
똑같은 교재 두 개(흑백)를 준비했다.
이미지에 중첩된 문자는 이미지의 부모 요소를 기준으로 하기 때문에 텍스트는 위의 부모 요소와 함께 이동합니다.
overflow: hidden;초과 시 숨김.
・무한 가로 스크롤
똑같은 교재 두 개를 준비해 가로로 배열하다.
애니메이션을 0%에서 100%로 이동합니다.

<div class="parent">
  <div class="text-wrapper text-wrapper--01">
    <p class="text lenear01">このテキストはサンプルですこのテキストはサンプルです</p>
    <p class="text lenear02">このテキストはサンプルですこのテキストはサンプルです</p>
  </div>
  <div class="img-wrapper">
    <div class="text-wrapper text-wrapper--02">
      <p class="text text--white lenear01">このテキストはサンプルですこのテキストはサンプルです</p>
      <p class="text text--white lenear02">このテキストはサンプルですこのテキストはサンプルです</p>
    </div>
    <img src="画像">
  </div>
</div>

.parent {
  position: relative;
  width: 500px;
  margin: 0 auto;
  background: #aaa;
  overflow: hidden;
}
.text-wrapper {
  position: absolute;
  display: flex;
  width: 300%;
  top: 50%;
  left: 0;
  white-space: nowrap;
}
.text-wrapper--01 {
  transform: translate(0, -50%);
}
.text-wrapper--02 {
  transform: translate(-125px, -50%);
}
.text--white {
  color: #fff;
}
.text {
  color: #333;
}
.text--white {
  color: #fff;
}
.lenear01 {
  animation: linear 40s -20s linear infinite;
}
.lenear02 {
  animation: linear2 40s linear infinite;
}
.img-wrapper {
  position: relative;
  width: 250px;
  margin: 0 auto;
  overflow: hidden;
}
img {
  width: 100%;
  height: auto;
}
@keyframes linear {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes linear2 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}