背景の画像や色によって文字色のテイストが変わる文字加工

はじめに

• 背景の色や写真の輪郭に合わせて文字のテイストが変わる、ファーストビューで文字をアニメーションでスライドさせたい時といったインパクトを持たせたい箇所に使えそうな、簡単で面白い合成加工方法があったのでメモ。

コード

<div class="background">
  <div class="blend-txt">blend-txt</div>  
</div>

.background {
  height: 3000px;
  background: linear-gradient(30deg,blue,orange);
}

.blend-txt {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 100px;
  font-weight: 900;
  letter-spacing: 10px;
  color: #fff;
  mix-blend-mode: difference;
}

仕様

• 大枠となるbackgroundでスクロールして変化を確認できるような高さとグラデーションの背景色を設定しています。
• 子要素として入れ込んであるblend-txtにはスクロール時にテキストの変化がわかりやすいようにposition: fixed;を指定。
• そして今回のミソであるmix-blend-modeをblend-txtに指定することで背景によって文字色のテイストが変わる面白いエフェクトがかかります。（今回はdifferenceを指定）

See the Pen mix-blend-mode by mimihokuro (@mimi_hokuro) on CodePen.