impress.js
웹 브라우저 상에서 동작하는 HTML 프레젠테이션 플러그인
각 요소를 3D 공간의 객체로 생각하고, CSS3 transform과 transition 속성을 사용하여
독특한 프레젠테이션을 구성할 수 있다.
사용자는 마우스나 키보드를 사용하여 프레젠테이션을 조작할 수 있다.
impress.js는 오픈소스로 제공되어 있고, 모든 최신 브라우저에서 동작한다.
예시페이지를 확인해보자.
impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bart
Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation. For the best experience please use the latest Chrome, Safari or Firefox browser.
impress.js.org
예시코드, 필요할경우 수정해서 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* 이전 브라우저의 HTML5 디스플레이 역할 재설정 */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*배경에서 기본 글꼴과 좋은 기울기를 설정*/
body {
font-family: 'PT Sans', sans-serif;
min-height: 740px;
background: white;
}
/*텍스트 스타일*/
b, strong { font-weight: bold }
i, em { font-style: italic }
/*링크스타일*/
a {
color: inherit;
text-decoration: none;
padding: 0 0.1em;
background: rgba(255,255,255,0.5);
text-shadow: -1px -1px 2px rgba(100,100,100,0.9);
border-radius: 0.2em;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover,
a:focus {
background: rgba(255,255,255,1);
text-shadow: -1px -1px 2px rgba(100,100,100,0.5);
}
/*지원하지 않는 브라우저를 사용하는 사용자에게 폴백 메시지를 표시*/
.fallback-message {
font-family: sans-serif;
line-height: 1.3;
width: 780px;
padding: 10px 10px 0;
margin: 20px auto;
border: 1px solid #E4C652;
border-radius: 10px;
background: #EEDC94;
}
.fallback-message p {
margin-bottom: 10px;
}
.impress-supported .fallback-message {
display: none;
}
/*프레젠테이션 단계의 스타일*/
.step {
position: relative;
width: 900px;
padding: 40px;
margin: 20px auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
font-family: 'PT Serif', georgia, serif;
font-size: 48px;
line-height: 1.5;
}
/*기본적으로 우리는 마진을 제거하고 비활성 단계를 조금 투명하게 */
.impress-enabled .step {
margin: 0;
opacity: 0.3;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
-ms-transition: opacity 1s;
-o-transition: opacity 1s;
transition: opacity 1s;
}
.impress-enabled .step.active { opacity: 1 }
/*
이러한 '슬라이드' 단계 스타일은 HTML5 슬라이드에서 크게 영감을 받음
http://html5slides.googlecode.com/svn/trunk/styles.css
*/
.slide {
display: block;
width: 900px;
height: 700px;
padding: 40px 60px;
background-color: white;
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
color: rgb(102, 102, 102);
text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
font-family: 'Open Sans', Arial, sans-serif;
font-size: 30px;
line-height: 36px;
letter-spacing: -1px;
}
.slide q {
display: block;
font-size: 50px;
line-height: 72px;
margin-top: 100px;
}
.slide q strong {
white-space: nowrap;
}
/*
Z 축과 함께 3D 위치
*/
#title {
padding: 0;
}
#title .try {
font-size: 64px;
position: absolute;
top: -0.5em;
left: 1.5em;
-webkit-transform: translateZ(20px);
-moz-transform: translateZ(20px);
-ms-transform: translateZ(20px);
-o-transform: translateZ(20px);
transform: translateZ(20px);
}
#title h1 {
font-size: 190px;
-webkit-transform: translateZ(50px);
-moz-transform: translateZ(50px);
-ms-transform: translateZ(50px);
-o-transform: translateZ(50px);
transform: translateZ(50px);
}
#title .footnote {
font-size: 32px;
}
/*
텍스트 스타일링 big
*/
#big {
width: 600px;
text-align: center;
font-size: 60px;
line-height: 1;
}
#big b {
display: block;
font-size: 250px;
line-height: 250px;
}
#big .thoughts {
font-size: 90px;
line-height: 150px;
}
/*
텍스트 스타일링 tiny
*/
#tiny {
width: 500px;
text-align: center;
}
/*
애니메이션 텍스트
*/
#ing { width: 500px }
#ing b {
display: inline-block;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#ing.present .positioning {
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
-ms-transform: translateY(-10px);
-o-transform: translateY(-10px);
transform: translateY(-10px);
}
#ing.present .rotating {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
transform: rotate(-10deg);
-webkit-transition-delay: 0.25s;
-moz-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
-o-transition-delay: 0.25s;
transition-delay: 0.25s;
}
#ing.present .scaling {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
transform: scale(0.7);
-webkit-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-o-transition-delay: 0.5s;
transition-delay: 0.5s;
}
#imagination {
width: 600px;
}
#imagination .imagination {
font-size: 78px;
}
#source {
width: 700px;
padding-bottom: 300px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAMAAACwUBm+AAAAAXNSR0IArs4c6QAAAKtQTFRFsAAAvbWSLUUrLEQqY1s8UYJMqJ1vNTEgOiIdIzYhjIFVLhsXZ6lgSEIsP2U8JhcCVzMsSXZEgXdOO145XJdWOl03LzAYMk4vSXNExr+hwcuxRTs1Qmk+RW9Am49eFRANQz4pUoNMQWc+OSMDTz0wLBsCNVMxa2NBOyUDUoNNSnlEWo9VRGxAVzYFl6tXCggHbLNmMUIcHhwTXkk5f3VNRT8wUT8xAAAACQocRBWFFwAAAAF0Uk5TAEDm2GYAAAPCSURBVHja7d3JctNAFIZRMwRCCGEmzPM8z/D+T8bu/ptbXXJFdij5fMt2Wuo+2UgqxVmtttq5WVotLzBgwIABAwYMGDCn0qVqbo69psPqVpWx+1XG5iaavF8wYMCAAQMGDBgwi4DJ6Y6qkxB1HNlcN3a92gbR5P2CAQMGDBgwYMCAWSxMlrU+UY5yu2l9okfV4bAxUVbf7TJnAwMGDBgwYMCAAbMLMHeqbGR82Zy+VR1Ht81nVca6R+UdTLaU24Ruzd3qM/e4yjnAgAEDBgwYMGDA7AJMd1l/3NRdVGcj3eX/2WEhCmDGxnM7yqygu8XIPjJj8iN/MGDAgAEDBgwYMAuDGb8q0RGlLCHLv1t9qDKWn3vdNHVuEI6HPaxO9Jo3GDBgwIABAwYMmIXBdC9ShGgMk+XnkXUeuGcsP/e1+lhNnZsL/G5Vs3OAAQMGDBgwYMCAWSxMR3SzOmraG5atdy9wZKzb+vg16qyqe2FltbnAgAEDBgwYMGDALAxmTJSuN3WA76rnVca6GTnemGN1WoEBAwYMGDBgwIBZGMxUomy4+xO899V4LAg5Xnc2MGDAgAEDBgwYMGA218Wq+2K1LDqvY9xZu8zN8fICdM6btYABAwYMGDBgwIABMzfH0+pGU5afze2tXebmeAfVz+p8BQYMGDBgwIABAwbMPBzZ+oWmfJrln1273FhkbHzee9WWbw7AgAEDBgwYMGDALAKm43hcdctKgblcPamOhuXnXlY5Xs6bsW4FGyQCAwYMGDBgwIABswiYMceZKgvMo+h8mrHLTdn676rj+FEFoTtHd8MwOxEYMGDAgAEDBgyYRcBM5UhXqiymW3R3c9ARhWO/OmjqfjVZy+xEYMCAAQMGDBgwYBYG073OnCV0RFNhMhaOa9WfKmOB6XjHMN1tQmaAAQMGDBgwYMCA2VWY7vXjz1U4croAzgPztwIDBgwYMGDAgAEDZhswh035NBw59Dww3RgYMGDAgAEDBgwYMJuD6f4tXT7NUqfCdBvZLkxXdgQGDBgwYMCAAQNmt2DGj8WzwAfV/w7T/aq7mxwwYMCAAQMGDBgwuwqTOo7uTwTngflSzQ3TdaJvAwEDBgwYMGDAgAED5gSvgbyo5oHZ4Pc+gwEDBgwYMGDAgAEzhOm+5G0qTGaAAQMGDBgwYMCAAXNaMOcnls3tNwWm+zRzp54NDBgwYMCAAQMGDJh5YNL36k1TLuGvVq+qnKMbS5n7tulT9asCAwYMGDBgwIABA2ZumKuztLnjgQEDBgwYMGDAgNl5mH/4/ltKA6vBNAAAAABJRU5ErkJggg==);
background-position: bottom right;
background-repeat: no-repeat;
}
#source q {
font-size: 60px;
}
/*
3D 타이포그래피
*/
#its-in-3d p {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; /* Y U need this Firefox?! */
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/*
Z축을 따라 개별적으로 배치하고 전환
*/
#its-in-3d span,
#its-in-3d b {
display: inline-block;
-webkit-transform: translateZ(40px);
-moz-transform: translateZ(40px);
-ms-transform: translateZ(40px);
-o-transform: translateZ(40px);
transform: translateZ(40px);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#its-in-3d .have {
-webkit-transform: translateZ(-40px);
-moz-transform: translateZ(-40px);
-ms-transform: translateZ(-40px);
-o-transform: translateZ(-40px);
transform: translateZ(-40px);
}
#its-in-3d .you {
-webkit-transform: translateZ(20px);
-moz-transform: translateZ(20px);
-ms-transform: translateZ(20px);
-o-transform: translateZ(20px);
transform: translateZ(20px);
}
#its-in-3d .noticed {
-webkit-transform: translateZ(-40px);
-moz-transform: translateZ(-40px);
-ms-transform: translateZ(-40px);
-o-transform: translateZ(-40px);
transform: translateZ(-40px);
}
#its-in-3d .its {
-webkit-transform: translateZ(60px);
-moz-transform: translateZ(60px);
-ms-transform: translateZ(60px);
-o-transform: translateZ(60px);
transform: translateZ(60px);
}
#its-in-3d .in {
-webkit-transform: translateZ(-10px);
-moz-transform: translateZ(-10px);
-ms-transform: translateZ(-10px);
-o-transform: translateZ(-10px);
transform: translateZ(-10px);
}
#its-in-3d .footnote {
font-size: 32px;
-webkit-transform: translateZ(-10px);
-moz-transform: translateZ(-10px);
-ms-transform: translateZ(-10px);
-o-transform: translateZ(-10px);
transform: translateZ(-10px);
}
#its-in-3d.present span,
#its-in-3d.present b {
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
-ms-transform: translateZ(0px);
-o-transform: translateZ(0px);
transform: translateZ(0px);
}
/*
개요 표시되지 않도록
*/
#overview { display: none }
/*
포인터 커서를 제공
*/
.impress-on-overview .step {
opacity: 1;
cursor: pointer;
}
.hint {
/*
프레젠테이션이 시작될 때까지 또는 지원하지 않는 브라우저에서 힌트를 숨김
*/
display: none;
position: fixed;
left: 0;
right: 0;
bottom: 200px;
background: rgba(0,0,0,0.5);
color: #EEE;
text-align: center;
font-size: 50px;
padding: 20px;
z-index: 100;
opacity: 0;
-webkit-transform: translateY(400px);
-moz-transform: translateY(400px);
-ms-transform: translateY(400px);
-o-transform: translateY(400px);
transform: translateY(400px);
/*
페이드 아웃하고 이동
*/
-webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;
-moz-transition: opacity 1s, -moz-transform 0.5s 1s;
-ms-transition: opacity 1s, -ms-transform 0.5s 1s;
-o-transition: opacity 1s, -o-transform 0.5s 1s;
transition: opacity 1s, transform 0.5s 1s;
}
/*
프레젠테이션이 초기화될 때 힌트를 '활성화'
*/
.impress-enabled .hint { display: block }
/*
첫 번째 단계(ID가 'bored'인 경우)가 활성화되면 표시
*/
.impress-on-bored .hint {
/*
투명도를 제거하고 힌트를 기본 고정 상태로
*/
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
/*
4.5초 지연 후 먼저 변환 속성을 애니메이션화하여 힌트를 이동합니다
그것의 정확한 위치로 그리고 그 후에 우리는 그것을 불투명하게
*/
-webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;
-moz-transition: opacity 1s 5s, -moz-transform 0.5s 4.5s;
-ms-transition: opacity 1s 5s, -ms-transform 0.5s 4.5s;
-o-transition: opacity 1s 5s, -o-transform 0.5s 4.5s;
transition: opacity 1s 5s, transform 0.5s 4.5s;
}
/*
때때로 요소가 3D로 배치됩니다(특히 요소가 뒤로 이동될 때)
Z축을 따라)는 클릭할 수 없습니다. 이는 <본체> 뒤에 있기 때문입니다
원소의.
이를 방지하기 위해 설정을 통해 <본체>를 클릭할 수 없도록 하기로 했습니다
*/
.impress-enabled { pointer-events: none }
.impress-enabled #impress { pointer-events: auto }
</style>
</head>
<body>
<div id="impress">
<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
<q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>
<div class="step slide" data-x="0" data-y="-1500">
<q>Don’t you think that presentations given <strong>in modern browsers</strong> shouldn’t <strong>copy the limits</strong> of ‘classic’ slide decks?</q>
</div>
<div class="step slide" data-x="1000" data-y="-1500">
<q>Would you like to <strong>impress your audience</strong> with <strong>stunning visualization</strong> of your talk?</q>
</div>
<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
<span class="try">then you should try</span>
<h1>impress.js<sup>*</sup></h1>
<span class="footnote"><sup>*</sup> no rhyme intended</span>
</div>
<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
<p>It’s a <strong>presentation tool</strong> <br/>
inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br/>
and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.</p>
</div>
<div id="big" class="step" data-x="3500" data-y="2100" data-rotate="180" data-scale="6">
<p>visualize your <b>big</b> <span class="thoughts">thoughts</span></p>
</div>
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p>and <b>tiny</b> ideas</p>
</div>
<div id="ing" class="step" data-x="3500" data-y="-850" data-rotate="270" data-scale="6">
<p>by <b class="positioning">positioning</b>, <b class="rotating">rotating</b> and <b class="scaling">scaling</b> them on an infinite canvas</p>
</div>
<div id="imagination" class="step" data-x="6700" data-y="-300" data-scale="6">
<p>the only <b>limit</b> is your <b class="imagination">imagination</b></p>
</div>
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>want to know more?</p>
<q><a href="http://github.com/bartaz/impress.js">use the source</a>, Luke!</q>
</div>
<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
<p>one more thing...</p>
</div>
<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
<p><span class="have">have</span> <span class="you">you</span> <span class="noticed">noticed</span> <span class="its">it’s</span> <span class="in">in</span> <b>3D<sup>*</sup></b>?</p>
<span class="footnote">* beat that, prezi ;)</span>
</div>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>
</div>
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/impress.js/0.5.3/impress.min.js"></script>
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
impress().init();
</script>
</html>'Personal > Tip' 카테고리의 다른 글
| itdaa 잇다, 실무진 zoom 강의 (0) | 2023.06.08 |
|---|---|
| padlet, 함께 만드는 지도 맵, 계획, 타임라인 (0) | 2023.06.01 |
| 위키백과의 신뢰성은 어느정도될까? (0) | 2023.05.08 |
| 카드번호 유효기간만 있어도 결제된다! 결제를하기위한 최소정보 (0) | 2023.05.03 |
| 학습모듈 pdf 다운받기 (0) | 2023.04.27 |
