Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
impress.jsのスライドを管理する配列
/*
下記のindex.htmlのようにスライドを設定した時の変数の中身です。
impress.jsでは、各スライドの要素は、stepsとstepsDataという配列で管理されています。
stepsは、stepクラスを持つDOM要素の配列です。
stepsから、stepsDataを作ります。
*/
// steps 各スライドのDOM要素を管理
[div#step-1.step.slide.future.active, div#step-2.step.slide.future, div#step-3.step.slide.future]
// stepsData 各スライドの設定情報を管理
Object {impress-step-1: Object, impress-step-2: Object, impress-step-3: Object}
// stepsData[0]
{
impress-step-1: Object
el: div#step-1.step.slide.future.active, // steps[0]のDOM要素
rotate: {
x: 0
y: 0
z: 0
},
scale: 1,
translate: {
x: 0
y: -1500
z: 0
}
}
/*
* stepsとstepsDataが作られる場所
*/
// el(DOM)のdata属性を、stepsDataに入れて管理します。
// elにstyleの適用もします。
var initStep = function ( el, idx ) {
// datasetはHTML5のdata属性を取得できるオブジェクトです。
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
};
// idが設定されていない場合はは、デフォルト値を設定します。
if ( !el.id ) {
el.id = "step-" + (idx + 1);
}
stepsData["impress-" + el.id] = step;
// el(DOM要素)にstyleを設定します。
css(el, {
position: "absolute",
transform: "translate(-50%,-50%)" + // 上下左右の中央に配置させるのにtranslateを使います
translate(step.translate) + // translate3dを設定します。
rotate(step.rotate) +
scale(step.scale),
transformStyle: "preserve-3d"
});
};
// initStepが使われる場所を見てみます。
var init = function () {
// 省略
// root(DOM要素)から、stepクラスを持つ要素を取得します。
steps = $$(".step", root);
// stepクラスを持つ要素全てに、initStep関数を実行します。
steps.forEach( initStep );
// 省略
// root要素に"impress:init"イベントを発行します。
triggerEvent(root, "impress:init", { api: roots[ "impress-root-" + rootId ] });
};
<!doctype html>
<html lang="en">
<head>
<!-- 省略 -->
</head>
<body class="impress-not-supported">
<div class="fallback-message">
<p>未対応ブラウザへのメッセージ</p>
</div>
<!-- スライドの内容 -->
<div id="impress">
<div class="step slide" data-x="0" data-y="-1500">
<h2>スライド1</h2>
<p>スライドの内容</p>
</div>
<div class="step slide" data-x="-1000" data-y="-2500" data-rotate="90" data-scale="6">
<h2>スライド2</h2>
</div>
<div class="step slide" data-x="-2000" data-y="-3500">
<h2>スライド3</h2>
</div>
</div>
<div class="hint">
<p>Use a spacebar or arrow keys to navigate</p>
</div>
<!-- 初期化処理 -->
<script>
if ("ontouchstart" in document.documentElement) {
document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
}
</script>
<script src="js/impress.js"></script>
<script>impress().init();</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment