순수 HTML, CSS, JavaScript로 만드는
웹 기반 프레젠테이션
← → 키 또는 스와이프로 이동
레이아웃
fixed 뷰포트 + absolute 슬라이드
전환
CSS Transition + transform/opacity
상태 관리
slideIndex 단일 상태 + URL hash
등장 효과
.reveal 클래스 + transition-delay
position: fixed 뷰포트 안에
position: absolute 슬라이드를 겹쳐
transform: translateX로 전환합니다
max-width: 680px로 읽기 편한 폭 유지
clamp()로 반응형 타이포그래피 처리
<div class="slide-viewport">
<section class="slide active">
<div class="slide__inner">
<h2 class="reveal">제목</h2>
<p class="reveal">내용</p>
</div>
</section>
</div>.reveal 클래스로 순차 등장 효과가 자동 적용됩니다
goNext() {
if (this.isAnimating) return;
this._goSlide(this.current + 1, 'next');
}
// GPU 가속: transform + opacity만 사용
to.style.transform = 'translateX(0)';
from.style.transform = 'translateX(-100%)';isAnimating 플래그 + transitionend로 이벤트 잠금
← → 이전/다음
Space / PageDown 다음
Home / End 처음/끝
F 전체화면
좌 스와이프 → 다음
우 스와이프 → 이전
threshold: 50px
touch-action: pan-y
#slide-N 해시로 뒤로가기 및 직접 접근 지원
외부 라이브러리 0개 · 단일 HTML 파일