impress.js를 사용하여 Slideshows_javascript 팁 만들기-JS 튜토리얼-php.cn

impress.js를 사용하여 Slideshows_javascript 팁 만들기

WBOY

풀어 주다： 2016-05-16 15:40:05

원래의

1513명이 탐색했습니다.

지난주에 친구가 아주 멋진 확대/축소 슬라이드쇼를 만드는 것을 봤습니다. 아마도 제가 그것에 대해 잘 몰랐기 때문에 여러 웹 슬라이드쇼 도구를 찾는데 오랜 시간이 걸렸습니다. 필터링 후 Geek의 impress.js를 사용하기로 결정했습니다.

impress.js는 새로운 슬라이드쇼 도구입니다. 그 효과는 Prezi와 유사하지만 MIT&GPL 라이선스에 따른 오픈 소스입니다. 웹 개발에 대한 기초가 있는 사람들에게는 정말 좋은 소식입니다! 몇 가지 html 명령을 사용하고 impress.js를 로드하면 멋진 확대/축소 슬라이드쇼를 만들 수 있습니다.

만들 때 먼저 머리 부분을 작성해야 하는데, 이는 일반 웹과 동일하지만 몸 부분이 다릅니다. impress.js는 현재 Chrome, Firefox 및 Safari(터치 IE...)와 같은 최신 브라우저만 지원하므로 대체 메시지가 필요합니다.

<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>

로그인 후 복사

그럼 실제 신체, 감동 부분을 작성해 보세요. 이 섹션은 "< div id="impress" >"로 완전히 둘러싸여야 합니다.

첫 번째 슬라이드는 스텝 슬라이드로, 페이지별로 일반 슬라이드와 매우 유사합니다. 다음 방법을 사용하여 추가할 수 있습니다

<div id="page1" class="step slide" data-x="-1000" data-y="-1500">
  <q>第一页的幻灯片</q>
</div>

로그인 후 복사

작성해야 할 것은 id, data-x, data-y 입니다. id는 이름이고, data-x와 data-y는 좌표입니다. 실제로 impress.js는 큰 장면을 제공하며 필요한 것은 슬라이드를 넣고 올바른 위치에 배치하는 것뿐입니다. 그러면 던진 순서대로 표시됩니다. 실제로 data-z라는 또 다른 좌표가 있습니다. 이 좌표는 3D 효과와 확대/축소를 가져올 수 있습니다.

스텝이라는 또 다른 종류의 슬라이드는 단단한 프레임을 갖고 있는 이전 슬라이드와 달리, 제약을 가하는 프레임을 완전히 제거하고 배경에 직접 글을 쓰는 슬라이드입니다. 다음 예를 살펴보세요.

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
  <span>你看到的幻灯片由</span>
  <h1>impress.js</h1>
  <span>给你呈现</span>
</div>

로그인 후 복사

여기서 특별한 점은 이 슬라이드의 크기를 나타내는 데이터 배율이 있다는 것입니다. 페이지를 매우 크거나 작게 만들어 배율 대비를 제공할 수 있습니다. 회전 기능도 있습니다:

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
  <p>这是一个 <strong>presentation tool</strong> <br/>
  作者从 <a href="http://prezi.com">prezi.com</a> 得到灵感<br/>
  利用现代浏览器<strong>CSS3 transforms and transitions</strong>的力量</p>
</div>

로그인 후 복사

위의 data-rotate는 회전 각도를 나타냅니다.

마지막으로 전체 재생 프로세스를 제어하려면 키보드의 화살표 키를 사용해야 한다는 점을 사용자에게 알리는 힌트를 제공할 수 있습니다. 사용자가 슬라이드를 클릭하기만 했는데 응답이 없으면 이 메시지가 자동으로 나타납니다.

<div class="hint">
  <p>请用方向键控制</p>
</div>

로그인 후 복사

페이지 마지막에 impress.js를 로드해야 합니다. 여기서는 작성자의 페이지를 직접 인용하고 있지만 오프라인 디스플레이인 경우 다운로드하여 사용하는 것이 좋습니다. 단순히 js를 로드하는 것만으로는 충분하지 않으며, impress().init()를 사용하여 시작해야 합니다.

<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>

로그인 후 복사

사실 이 도구에는 많은 기능이 있습니다. 저는 가장 기본적인 기능 중 일부만 배웠습니다. 공식 홈페이지에서 제공하는 index.html을 직접 살펴보는 것이 좋습니다. 어떤 기능이 있는지 알려주는 자세한 설명이 있어서 작성자가 제공한 index.html에서 페이지를 만들고 수정했습니다. 이것들은 매우 간단하지만 연설용 슬라이드를 만들기에 충분합니다. 제가 만든 페이지는 Gist에 올려져 있으며, 전체 코드는 이 페이지 끝부분에서 확인하실 수 있습니다.

물론 유사한 도구 중에는 이 아이디어의 초기 구현인 프레지를 언급하지 않을 수 없지만, 중국어를 지원하지 않는다고 합니다. 국내 Tencent AlloyTeam도 iPresst라는 도구를 개발했는데, 이는 바보들에게 좋은 도구라고 할 수 있지만 소셜 네트워크이기 때문에 약간 비공개입니다. impress.js의 가장 큰 결점은 너무 괴상하다는 점입니다. WYSIWYG 개발 도구가 있다면 분명히 대중화될 것입니다.




 
 
 
 impress.js 尝试
  
 




 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.



 
  第一页的幻灯片：
是否尝试过这样幻灯？
  这种幻灯片最初由Prezi带给世界
 
 
  这种幻灯片通过ZUI的方式，彻底摆脱了传统幻灯片的“盒子限制”
  唯一限制你的是你的创意！
 
 
  后面还有更多惊喜！
 
 
  你看到的幻灯片由
  impress.js
  给你呈现
 
 
  这是一个 presentation tool 

  作者从 prezi.com 得到灵感

  利用现代浏览器CSS3 transforms and transitions的力量
 
 
  将你的想法视觉化
 
 
  请看impress.js
  

  开放的幻灯工具
 
 
 



 请用方向键控制


<script>
if ("ontouchstart" in document.documentElement) { 
 document.querySelector(".hint").innerHTML = "<p>请用方向键控制</p>";
}
</script>
<script src="http://bartaz.github.io/impress.js/js/impress.js"></script>
<script>impress().init();</script>