アニメーション Tips集

web制作の現場で使用したアニメーション

web制作の現場だと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%);
  }
}