8. html 파일 수정
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable"
content="yes" />
<link href="http://fonts.googleapis.com/css?
family=Open+Sans:regular,semibold,italic,italicsemibold|
PT+Sans:400,700,400italic,700italic|PT+Serif:
400,700,400italic,700italic" rel="stylesheet" />
<link href="css/impress-demo.css" rel="stylesheet" />
</head>
9. <body class="impress-not-supported">
<div class="fallback-message"> 지원되지 않는 브라우저에
<p>Your browser <b>doesn't support the
features required</b> by impress.js, so you 메시지를 남깁니다.
are presented with a simplified version of this
presentation.</p> 자바스크립트에서
<p>For the best experience please use the
latest <b>Chrome</b>, <b>Safari</b> or 처리되지만
<b>Firefox</b> browser.</p>
</div> 명시적으로 작성합니다.
10. <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
프리젠테이션 div 태그,
those slides-based presentations?</q>
</div> impress id로 구성됩니다.
:
:
:
<div id="overview" class="step" data-x="3000" 각 스텝 div는 id, class, x,
data-y="1500" data-scale="10">
</div> y,... 속성을 가집니다.
</div>
11. 지원 속성
data-x,y,z 는 좌표. 픽셀단위,
<div id="title" class="step" data-x="0" data-y="0"
data-scale="4">
디폴트 0.
:
</div>
data-rotate-x, rotate-y,rotate-z
<div id="its" class="step" data-x="850" data- 는 회전각도, (+:CW, -:CCW)
y="3000" data-rotate="90" data-scale="5">
:
</div>
data-scale 는 스텝의 크기. 디
폴트 1.
12. js 파일 개략 분석
steps = $$(".step", root); var initStep = function ( el, idx ) {
steps.forEach( initStep );
var data = el.dataset,
step = {
translate: {
x: toNumber(data.x),
y: toNumber(data.y),
z: toNumber(data.z)
},
rotate: {
x: toNumber(data.rotateX),
y: toNumber(data.rotateY),
z: toNumber(data.rotateZ || data.rotate)
},
scale: toNumber(data.scale, 1),
el: el
};
if ( !el.id ) {
el.id = "step-" + (idx + 1);
}
stepsData["impress-" + el.id] = step;
};
13. var goto = function ( el, duration ) {
var step = stepsData["impress-" + el.id];
var target = {
rotate: {
x: -step.rotate.x,
var zoomin = target.scale >= currentState.scale;
y: -step.rotate.y,
z: -step.rotate.z
duration = toNumber(duration,
}, config.transitionDuration);
translate: {
var delay = (duration / 2);
x: -step.translate.x,
y: -step.translate.y,
if (el === activeStep) {
z: -step.translate.z
windowScale = computeWindowScale(config);
},
}
scale: 1 / step.scale
};
var targetScale = target.scale * windowScale;
14. // `root` is used for scaling and `canvas` for translate and rotations.
css(root, {
transform: perspective( config.perspective / targetScale ) + scale( targetScale ),
transitionDuration: duration + "ms",
transitionDelay: (zoomin ? delay : 0) + "ms"
});
css(canvas, {
transform: rotate(target.rotate, true) + translate(target.translate),
transitionDuration: duration + "ms",
transitionDelay: (zoomin ? 0 : delay) + "ms"
});
// store current state
currentState = target;
activeStep = el;
window.clearTimeout(stepEnterTimeout);
stepEnterTimeout = window.setTimeout(function() {
onStepEnter(activeStep);
}, duration + delay);
15. 배포하기
html 파일을 웹브라우저에서 보여주므로 웹서버가 필요함.
Dropbox, GitHub, Google Code
호스팅서버.
PT 하는 컴퓨터에 복사.
최신 브라우저 설치 여부 확인.
