impress.js 이용하기
impress.js?브라우저만 있으면 화려한 프리젠테이션을 할 수 있습니다.최신 브라우저의 CSS 기능 이용합니다. prezi 와 유사한 형태의 프리젠테이션을 할 수 있습니다.
impress.js ? impress.js 도구일뿐 멋진 프리젠테이션을 보장하지 않습니다. 좋은 컨텐트를 만들세요. 스터디에서는 책 내용을 잘 정리하는 것이 중요하겠죠.
impress.js 사용법https://github.com/bartaz/impress.js/ 에서다운로드합니다.                         다운로드하려면                        여기를 ...
impress.js 구성웹브라우저에서 동작하므로html 파일, impress.js, css파일이 필요합니다.
impress.js 수정전발표할 컨텐츠를 준비하세요.먼저 전체 레이아웃을 결정하세요.
html 파일 수정<html lang="en"><head>  <meta charset="utf-8" />  <meta name="viewport" content="width=1024" />  <meta name="app...
<body class="impress-not-supported"><div class="fallback-message">                    지원되지 않는 브라우저에   <p>Your browser <b>d...
<div id="impress">  <div id="bored" class="step slide" data-x="-1000" data-y="-1500">     <q>Arent you just <b>bored</b> w...
지원 속성                                                     data-x,y,z 는 좌표. 픽셀단위,<div id="title" class="step" data-x="0" da...
js 파일 개략 분석steps = $$(".step", root);   var initStep = function ( el, idx ) {steps.forEach( initStep );    var data = el.d...
var goto = function ( el, duration ) { var step = stepsData["impress-" + el.id]; var target = {      rotate: {         x: ...
// `root` is used for scaling and `canvas` for translate and rotations.css(root, { transform: perspective( config.perspect...
배포하기html 파일을 웹브라우저에서 보여주므로 웹서버가 필요함.Dropbox, GitHub, Google Code호스팅서버.PT 하는 컴퓨터에 복사.최신 브라우저 설치 여부 확인.
Impress js
Upcoming SlideShare
Loading in …5
×

Impress js

2,577 views

Published on

Published in: Technology, Self Improvement
  • Be the first to comment

Impress js

  1. 1. impress.js 이용하기
  2. 2. impress.js?브라우저만 있으면 화려한 프리젠테이션을 할 수 있습니다.최신 브라우저의 CSS 기능 이용합니다. prezi 와 유사한 형태의 프리젠테이션을 할 수 있습니다.
  3. 3. impress.js ? impress.js 도구일뿐 멋진 프리젠테이션을 보장하지 않습니다. 좋은 컨텐트를 만들세요. 스터디에서는 책 내용을 잘 정리하는 것이 중요하겠죠.
  4. 4. impress.js 사용법https://github.com/bartaz/impress.js/ 에서다운로드합니다. 다운로드하려면 여기를 클릭하세요
  5. 5. impress.js 구성웹브라우저에서 동작하므로html 파일, impress.js, css파일이 필요합니다.
  6. 6. impress.js 수정전발표할 컨텐츠를 준비하세요.먼저 전체 레이아웃을 결정하세요.
  7. 7. 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>
  8. 8. <body class="impress-not-supported"><div class="fallback-message"> 지원되지 않는 브라우저에 <p>Your browser <b>doesnt support thefeatures required</b> by impress.js, so you 메시지를 남깁니다.are presented with a simplified version of thispresentation.</p> 자바스크립트에서 <p>For the best experience please use thelatest <b>Chrome</b>, <b>Safari</b> or 처리되지만<b>Firefox</b> browser.</p></div> 명시적으로 작성합니다.
  9. 9. <div id="impress"> <div id="bored" class="step slide" data-x="-1000" data-y="-1500"> <q>Arent 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>
  10. 10. 지원 속성 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.
  11. 11. 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; };
  12. 12. 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;
  13. 13. // `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 statecurrentState = target;activeStep = el;window.clearTimeout(stepEnterTimeout);stepEnterTimeout = window.setTimeout(function() { onStepEnter(activeStep);}, duration + delay);
  14. 14. 배포하기html 파일을 웹브라우저에서 보여주므로 웹서버가 필요함.Dropbox, GitHub, Google Code호스팅서버.PT 하는 컴퓨터에 복사.최신 브라우저 설치 여부 확인.

×