CSS로 요소가 왼쪽에서 슬라이드해 들어오게 만들기

왼쪽에서 슬라이드해 들어오는 효과는 요소를 최종 위치보다 왼쪽에 있는 지점에서 화면 안으로 이동시킵니다. 두 상태 사이에서 transform과 opacity를 바꾸면 CSS로 이 효과를 만들 수 있습니다. 이 예제에서는 transition을 사용합니다. 여러 단계를 거치거나 반복되는 효과에는 키프레임을 사용하는 CSS animation도 선택할 수 있습니다.

왼쪽에서 슬라이드해 들어오는 효과의 원리

transition은 속성 값이 바뀔 때 그 변화를 애니메이션으로 보여 줍니다. 요소는 왼쪽으로 이동하고 투명한 상태에서 시작한 다음, 원래 위치로 이동하며 표시됩니다. translateX()는 가로 이동을 제어하고, 전환 시간과 이징은 변화가 어떤 느낌으로 진행될지 결정합니다. transform 속성은 문서 흐름에서 요소가 차지하는 위치를 바꾸지 않고 화면에 보이는 위치만 바꿉니다.

HTML 구조 설정하기

페이지에는 CSS가 선택할 수 있는 클래스가 지정된 요소가 필요합니다. 아래 전체 예제에서 요소는 처음에 slide-in 클래스만 갖고 있으며, 페이지가 로드된 뒤 JavaScript가 is-visible을 추가해 브라우저가 초기 상태에서 전환하도록 합니다. HTML에 처음부터 두 클래스가 모두 있으면 요소는 첫 렌더링부터 표시되며 숨겨진 상태에서 애니메이션으로 나타나지는 않습니다. 슬라이드 전환을 보이게 하려면 예제처럼 초기 상태가 렌더링된 다음 표시 클래스를 추가하세요.

CSS로 왼쪽에서 슬라이드해 들어오는 효과 만들기

시작 상태를 transform: translateX(-100vw)와 opacity: 0으로 설정합니다. 뷰포트 너비만큼 이동시키면 요소가 왼쪽에 놓이고, opacity는 그 위치에 있는 동안 요소를 투명하게 만듭니다. 표시 상태에서는 transform: translateX(0)과 opacity: 1을 사용합니다. 이 속성들에 적용한 transition은 이징 곡선에 따라 0.5초 동안 변화를 애니메이션으로 보여 줍니다.

페이지에서 가로 넘침도 숨겨 화면 밖의 시작 위치 때문에 가로 스크롤 막대가 생기지 않게 합니다. 요소가 더 짧은 거리를 이동하게 하려면 이동 거리를 조정하세요.

효과 실행 및 사용자 지정

이 JavaScript를 generate-page.js 같은 파일에 복사해 Node.js로 실행하면 완전한 HTML 페이지 소스가 출력됩니다. 그 소스를 slide-in.html로 저장한 뒤 브라우저에서 열어 효과를 확인하세요. 이 예제는 페이지 로드 시 효과를 시작합니다. 사이트에서는 버튼 클릭이나 다른 이벤트에 응답해 표시 클래스를 추가할 수도 있습니다. 예제에 표시되는 라벨은 영어로 유지됩니다.

const html = `<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Slide in from the left</title>
  <style>
    body { overflow-x: hidden; font: 1rem sans-serif; }
    .slide-in {
      display: inline-block;
      padding: 1rem 1.5rem;
      background: #e7f1ff;
      transform: translateX(-100vw);
      opacity: 0;
      transition: transform 500ms ease, opacity 500ms ease;
    }
    .slide-in.is-visible {
      transform: translateX(0);
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slide-in">Hello, I slide in from the left!</div>
  <script>
    window.addEventListener("load", () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.querySelector(".slide-in").classList.add("is-visible");
        });
      });
    });
  </script>
</body>
</html>`;
console.log(html);

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Slide in from the left</title>
  <style>
    body { overflow-x: hidden; font: 1rem sans-serif; }
    .slide-in {
      display: inline-block;
      padding: 1rem 1.5rem;
      background: #e7f1ff;
      transform: translateX(-100vw);
      opacity: 0;
      transition: transform 500ms ease, opacity 500ms ease;
    }
    .slide-in.is-visible {
      transform: translateX(0);
      opacity: 1;
    }
  </style>
</head>
<body>
  <div class="slide-in">Hello, I slide in from the left!</div>
  <script>
    window.addEventListener("load", () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          document.querySelector(".slide-in").classList.add("is-visible");
        });
      });
    });
  </script>
</body>
</html>

속도를 바꾸려면 500ms를 수정하세요. 지속 시간과 이징은 각각 따로 조정할 수 있습니다. 위쪽에서 이동시키려면 시작 상태에 음수 세로 이동 거리를 사용하는 translateY()를 적용하고, 표시 상태에는 translateY(0)을 사용하세요. 페이지가 렌더링될 때 표시 클래스가 이미 있으면 JavaScript는 선택 사항입니다. 이벤트나 이후 상태 변경에 맞춰 효과를 시작하려면 JavaScript를 사용하세요.

자주 묻는 질문

모바일에서도 작동하나요?

이 예제는 CSS 변환과 전환을 사용합니다. 평소 호환성 검토 과정에서 사이트가 지원하는 브라우저와 기기에서 확인하세요.

지속 시간을 어떻게 바꾸나요?

transition 선언에서 500ms 지속 시간을 변경하세요. 두 변화가 서로 다른 시점에 끝나도록 하려면 transform과 opacity에 서로 다른 지속 시간을 지정할 수 있습니다.

요소가 다른 방향에서 슬라이드해 들어오게 할 수 있나요?

네. 세로로 이동하려면 translateY()를 사용하고, 반대쪽 가로 방향에서 들어오게 하려면 translateX()의 부호와 이동 거리를 조정하세요.

JavaScript가 필요한가요?

아니요. CSS가 두 상태 사이의 전환을 처리합니다. JavaScript는 적절한 시점에 클래스를 바꾸는 한 가지 방법일 뿐입니다. HTML에 처음부터 클래스가 있거나 CSS로 상태를 바꾸는 다른 방법을 사용할 수도 있습니다.