画像のスライド系みたいに、bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させる方法をご紹介します。
Contents
プレゼン用パネルイメージを表示するCSSの記述例
※必要に応じて変更して下さい。
<style> body{ font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",Arial,sans-serif; padding: 0; margin: 0; } h1{ font-size:55px; line-height:1.4em; text-align:center; font-weight:normal; } section{ font-size:60px; text-align:center; padding-top:25px; color:#FFF; } </style>
プレゼン用パネルイメージを表示するHTMLの記述例
※bodyタグにデフォルトテーマ(class=”coverflow”)を設定します。articleタグ内に切り替わりパネル(section)を複数用意します。
<body class="coverflow"> <h1>キーボードの「←」「→」でパネルが左右に移動します。<br/> 「↑」「↓」でテーマが変わります。</h1> <article> <section>1</section> <section>2</section> <section>3</section> <section>4</section> <section>5</section> <section>6</section> <section>7</section> <section>8</section> <section>9</section> <section>10</section> <section>11</section> <section>12</section> <section>13</section> <section>14</section> <section>15</section> <section>16</section> <section>17</section> <section>18</section> <section>19</section> <section>20</section> <section>21</section> <section>22</section> <section>23</section> <section>24</section> <section>25</section> <section>26</section> <section>27</section> <section>28</section> <section>29</section> <section>30</section> </article> <script src="bespoke.js"></script> <script src="demo.js"></script> </body>
bespoke.jsを使ってプレゼンで紙芝居的に見せるためのパネルイメージを幾つかのテーマで表示させるJavaScriptの記述例
※bespoke.js、demo.jsファイルを読み込みます。demo.jsファイル内にパネルやテーマの切り替わり制御を記述してます。
<script src="bespoke.js"></script> <script src="demo.js"></script>
demo.jsファイル内の記述
※キーボードの「←」「→」でパネルが左右に移動し、「↑」「↓」でテーマ(themes)が変わる様に設定してます。必要に応じて変更して下さい。
(function() { 'use strict'; var themes, selectedThemeIndex, instructionsTimeout, deck; function init() { deck = bespoke.from('article'); initThemeSwitching(); } init(); function initThemeSwitching() { themes = [ 'coverflow', 'classic', 'cube', 'carousel', 'concave' ]; selectedThemeIndex = 0; initInstructions(); initKeys(); initSlideGestures(); initThemeGestures(); initButtons(); selectTheme(0); } function initInstructions() { if (isTouch()) { document.getElementById('input-method').innerHTML = 'Swipe up and down'; } instructionsTimeout = setTimeout(showInstructions, 5000); } function initKeys() { if (/Firefox/.test(navigator.userAgent)) { document.addEventListener('keydown', function(e) { if (e.which >= 37 && e.which <= 40) { e.preventDefault(); } }); } document.addEventListener('keydown', function(e) { var key = e.which; key === 37 && deck.prev(); (key === 32 || key === 39) && deck.next(); key === 38 && prevTheme(); key === 40 && nextTheme(); }); } function initSlideGestures() { var main = document.getElementById('main'), startPosition, delta, singleTouch = function(fn, preventDefault) { return function(e) { if (preventDefault) { e.preventDefault(); } e.touches.length === 1 && fn(e.touches[0].pageX); }; }, touchstart = singleTouch(function(position) { startPosition = position; delta = 0; }), touchmove = singleTouch(function(position) { delta = position - startPosition; }, true), touchend = function() { if (Math.abs(delta) < 50) { return; } delta > 0 ? deck.prev() : deck.next(); }; main.addEventListener('touchstart', touchstart); main.addEventListener('touchmove', touchmove); main.addEventListener('touchend', touchend); } function initThemeGestures() { var startPosition, delta, singleTouch = function(fn, preventDefault) { return function(e) { if (preventDefault) { e.preventDefault(); } e.touches.length === 1 && fn(e.touches[0].pageY); }; }; document.addEventListener('touchstart', singleTouch(function(position) { startPosition = position; delta = 0; })); document.addEventListener('touchmove', singleTouch(function(position) { delta = position - startPosition; }, true)); document.addEventListener('touchend', function() { if (Math.abs(delta) < 100) { return; } delta > 0 ? prevTheme() : nextTheme(); }); } function initButtons() { document.getElementById('up-arrow').addEventListener('click', prevTheme); document.getElementById('down-arrow').addEventListener('click', nextTheme); } function selectTheme(index) { var theme = themes[index]; document.body.className = theme; document.getElementById('theme').innerHTML = theme[0].toUpperCase() + theme.slice(1); selectedThemeIndex = index; } function nextTheme() { offsetSelectedTheme(1); hideInstructions(); } function prevTheme() { offsetSelectedTheme(-1); hideInstructions(); } function offsetSelectedTheme(n) { selectTheme(modulo(selectedThemeIndex + n, themes.length)); } function showInstructions() { document.querySelectorAll('header p')[0].className = 'visible'; } function hideInstructions() { clearTimeout(instructionsTimeout); document.querySelectorAll('header p')[0].className = 'hidden'; } function isTouch() { return !!('ontouchstart' in window) || navigator.msMaxTouchPoints; } function modulo(num, n) { return ((num % n) + n) % n; } }());
bespoke.js:プレゼン用のパネルとテーマを表示するデモページ
bespoke.js:プレゼン用のパネルとテーマを表示するデモ
ソース元:Bespoke.js
ソース元:Bespoke.js
見え方的には良いかもしれませんが、パワーポイントで作って見せた方が簡単で確実な気がします。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告