Reveal.js 기능 데모

이 프레젠테이션은 Reveal.js의 고급 기교들을 보여줍니다.

Auto Animate

다음 슬라이드로 이동 시 상자가 변형되는 모습을 보세요.

마술 같은 변형

이름이 같은 data-id를 가진 요소가 부드럽게 보간(Morphing)됩니다.

원형으로 변신!

3. 세로 슬라이드 (2D 구조)

지금 가로 방향이 아닌 아래쪽 방향키(↓)를 눌러 보세요.

👇

우주 동영상 배경

data-background-video 속성으로 비디오 백그라운드가 실시간 구동됩니다.

[발표자 꿀팁]
지금 키보드 S를 누르면 스피커용 비밀 메모 창이 뜹니다.

선형 그라데이션 배경

CSS 그라데이션을 배경으로 바로 지정할 수 있습니다.

data-background-gradient="..."

4. 소스 코드 포커스

코드를 구문 강조하고, 특정 줄만 밝게 조명할 수 있습니다.


          // 1. 빌드 트리거 함수
          function triggerBuild() {
            console.log("빌드 프로세스 가동");
            
            // 2. 파일 목록 읽기
            const files = fs.readdirSync("./slides");
            
            // 3. 인덱스 HTML 조립
            const template = getTemplate();
            fs.writeFileSync("index.html", template);
          }

방향키를 누르면 포커스가 다음 코드 줄로 이동합니다.

5. LaTeX 수학 공식

웹 폰트 기반으로 깨끗한 수식을 렌더링합니다.

오일러 공식: $$e^{i \pi} + 1 = 0$$
이차방정식 근의 공식: $$x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$$

6. 다양한 애니메이션 등장 효과

아이템마다 각양각색의 등장 및 강조 효과를 적용할 수 있습니다.

  • fragment fade-up (아래에서 올라옴)
  • fragment fade-left (오른쪽에서 들어옴)
  • fragment fade-out (다음 클릭 시 사라짐)
  • fragment highlight-red (빨간색으로 변경)
  • fragment highlight-blue (파란색으로 변경)
  • fragment custom blur (자체 필터 효과)

8. 웹사이트 실시간 임베딩

배경에 실제 웹페이지가 띄워져 있습니다. 발표 화면 안에서 스크롤하거나 링크 클릭이 가능합니다.

(iframe 내부 클릭 및 조작 가능)

9. 자동 재생 슬라이드 (3초)

이 슬라이드는 아무 조작을 하지 않아도 3초 뒤에 자동으로 다음 장으로 넘어갑니다.

데모 종료

브라우저 환경이기에 가능한 궁극의 발표 도구입니다.


← 메인 포털 목록으로 가기