Presenteer.jsでプレゼン資料を作ってみる

デモ

Presenteer.jsを利用してプレゼン資料作ってみた

１．まずはダウンロード

ここから
https://githu b.com/willemmulder/Presenteer.js

２．対象のページにPresenteer.jsインクルード

こんな感じ

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/presenteer.min.js"></script>

スライド用htmlの作成

<div class="presentationcontainer" id="presentationcontainer">
<div class="presentation" id="presentation">
<div>スライド１枚目</div>
<div>スライド２枚目</div>
<div>スライド３枚目</div>
</div>
</div>

cssの追加

スライドエリアを定義して、

.presentationcontainer {
  overflow: hidden;
  border:2px solid #000000;
  cursor: pointer;
  -webkit-box-shadow: inset 0px 0px 5px rgba(100,100,100,0.2);
  box-shadow: inset 0px 0px 5px rgba(100,100,100,0.2);
}

#presentationcontainer {
  height: 300px;
}

スライド定義する

.presentation > div {
  float: left;
  clear: both;
  padding: 60px;
}
.presentation {
  -moz-transition: all 0.7s ease;
  -webkit-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-perspective: hidden;
  -webkit-transform: translateZ(0);
}

jsの追加

$(window).load(function() {
var presentation = new Presenteer("#presentation", $("#presentation > div"), {
  centerHorizontally : false
});
$("#presentationcontainer").on("click", function() { presentation.next(); });
  presentation.start();
});

出来上がり

ソース

javascript

$(window).load(function() {
var presentation = new Presenteer("#presentation", $("#presentation > div"), {
  centerHorizontally : false
});
$("#presentationcontainer").on("click", function() { presentation.next(); });
  presentation.start();
});

HTML

<div class="presentationcontainer" id="presentationcontainer">
<div class="presentation" id="presentation">
<div>スライド１枚目</div>
<div>スライド２枚目</div>
<div>スライド３枚目</div>
</div>
</div>

CSS

.presentationcontainer {
  overflow: hidden;
/*  background: #ddddff;*/
  border:2px solid #000000;
  cursor: pointer;
  -webkit-box-shadow: inset 0px 0px 5px rgba(100,100,100,0.2);
  box-shadow: inset 0px 0px 5px rgba(100,100,100,0.2);
}
#presentationcontainer {
  height: 300px;
}

.presentation > div {
  float: left;
  clear: both;
  padding: 60px;
}

.presentation {
  -moz-transition: all 0.7s ease;
  -webkit-transition: all 0.7s ease;
  -o-transition: all 0.7s ease;
  -ms-transition: all 0.7s ease;
  transition: all 0.7s ease;
  -webkit-perspective: hidden;
  -webkit-transform: translateZ(0);
}