Reveal.js는 웹 기반 프레젠테이션 도구로, HTML, CSS 및 JavaScript를 사용하여 멋진 프레젠테이션을 만들 수 있습니다. Reveal.js에는 모션 및 애니메이션을 추가하여 프레젠테이션을 더욱 동적으로 만들 수 있습니다.

슬라이드에 모션 추가하기

Reveal.js에서 슬라이드에 모션을 적용하기 위해 CSS 클래스를 사용할 수 있습니다. 예를 들어, fade 클래스를 추가하면 해당 슬라이드가 서서히 나타납니다.

<section class="slides">
  <section>
    <h2>첫 번째 슬라이드</h2>
  </section>
  
  <section class="fade">
    <h2>두 번째 슬라이드</h2>
  </section>
  
  <section>
    <h2>세 번째 슬라이드</h2>
  </section>
</section>

애니메이션 추가하기

애니메이션을 추가하여 슬라이드 간 전환을 부드럽게 만들 수 있습니다. data-transition 속성을 사용하여 각 슬라이드의 전환 효과를 설정할 수 있습니다. 다음은 몇 가지 예시입니다.

<section data-transition="slide">...</section>
<section data-transition="fade">...</section>
<section data-transition="convex">...</section>

사용자 정의 애니메이션 추가하기

Reveal.js에서는 사용자 정의 CSS 키 프레임을 추가하여 독특한 애니메이션 효과를 만들 수 있습니다. CSS 파일에 다음과 같이 키 프레임을 추가할 수 있습니다.

@keyframes myAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

그런 다음 해당 슬라이드에 클래스를 지정하고 애니메이션을 적용할 수 있습니다.

<section class="my-animation">...</section>

요약

Reveal.js를 사용하여 프레젠테이션에 모션 및 애니메이션을 추가하는 방법을 살펴보았습니다. 슬라이드에 CSS 클래스를 사용하여 모션을 추가하고, data-transition 속성을 사용하여 전환 애니메이션을 설정할 수 있습니다. 또한 사용자 정의 CSS 키 프레임을 추가하여 독특한 애니메이션 효과를 만들 수도 있습니다. 자세한 내용은 Reveal.js 공식 문서를 참조하십시오.