Storybook

이 애니메이션은 크게 두 가지로 나눌 수 있을 것 같다.

1. 텍스트가 좌우로 무한히 움직인다.
2. 배경에 동그란 원이 있어, 이 원을 통과할 때 텍스트의 색이 바뀐다.

여기서 생각해보아야 할 것은 텍스트의 색을 부분적으로만 변화시키는 것은 쉽지 않은 일이라는 것이다. 좀 더 쉬운 길로 돌아가자. 두 개의 똑같지만 색만 다른 텍스트가 같은 속도로 움직인다고 가정해보자. 단지 원 안에서는 검정색 텍스트가, 원 밖에서는 하얀색 텍스트가 보여지면 되는 것이다. 그렇게 된다면 마치 원 안에 들어가면 텍스트의 색이 변화하는 것처럼 착각하게 할 수 있다.

일단 두 개의 텍스트를 만들어보자

텍스트 두 개가 겹치듯 존재해야 한다. 따라서 검정색 container 요소 안에 두 개의 자식 요소를 만든다. 하나는 h2 요소로 하얀색 텍스트를 만들고, 다른 하나는 노란 원 요소로, 안에 검정색 h2 텍스트 요소를 가지고 있다.

// ClipPathCircle.js

import './ClipPathCircle.css'

export const createClipPathCircle = () => {
  const text = 'Clip Path Circle'

  const article = document.createElement('article')
  article.classList.add('clip-path-circle__container')

  const articleText = document.createElement('h2')
  articleText.innerText = text
  articleText.classList.add('clip-path-circle__container-text')
  article.appendChild(articleText)

  const circle = document.createElement('div')
  circle.classList.add('clip-path-circle__circle')
  article.appendChild(circle)

  const circleText = document.createElement('h2')
  circleText.innerText = text
  circleText.classList.add('clip-path-circle__circle-text')
  circle.appendChild(circleText)

  return article
}

원을 만드는 방법

일단 원을 만들 수 있는 방법은 크게 두 가지가 있다. 첫째는 흔히 사용하는 border-radius를 50% 부여하는 방식이다. 둘째는 이번에 새로 배운, clip-path 속성을 이용하는 방식이다.

border-radius

border-radius를 50%로 하면 원이 만들어진다. 이 때, 원은 작지만 그 안의 h2 텍스트 요소는 그보다는 훨씬 클 것이므로, 원 안에서만 해당 텍스트가 보여지게 해야 한다. 따라서 overflow: hidden으로 넘치는 텍스트는 보여주지 않는다.

.clip-path-circle__circle {
  background-color: yellow;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;

	/* 원 만들기 */
  width: 400px;
  height: 400px;
  border-radius: 50%;
	overflow: hidden;
}

overflow: hidden을 사용하지 않으면 다음과 같이 두 개의 텍스트가 겹치게 된다.