impress.js メニューテスト

nodat

2012-04-15 14:17:51

License: MIT License

Fork: 0

Fav: 3

View: 1725

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 360 lines
HTML 54 lines
CSS 171 lines

impress.js でメニューインターフェイスを表示するテストです。
スマートフォンなどでも参照できるよう調整されたものをベースにしています。

参考URL:

http://bartaz.github.com/impress.js/
http://cykod.github.com/impress.js/

impress.js メニューテスト

/**
 * impress.js
 *
 * impress.js is a presentation tool based on the power of CSS3 transforms and transitions
 * in modern browsers and inspired by the idea behind prezi.com.
 *
 * MIT Licensed.
 *
 * Copyright 2011 Bartek Szopka (@bartaz)
 */

(function ( document, window ) {

// HELPER FUNCTIONS
    
    var pfx = (function () {

var style = document.createElement('dummy').style,
            prefixes = 'Webkit Moz O ms Khtml'.split(' '),
            memory = {};
            
        return function ( prop ) {
            if ( typeof memory[ prop ] === "undefined" ) {

var ucProp  = prop.charAt(0).toUpperCase() + prop.substr(1),
                    props   = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' ');

memory[ prop ] = null;
                for ( var i in props ) {
                    if ( style[ props[i] ] !== undefined ) {
                        memory[ prop ] = props[i];
                        break;
                    }
                }

}

return memory[ prop ];
        }

})();

// making given step active

}
			});
		}
//		alert(el.id);
		
        el.classList.add("active");
        impress.className = "step-" + el.id;
        
        var target = {
            rotate: {
                x: -parseInt(step.rotate.x, 10),
                y: -parseInt(step.rotate.y, 10),
                z: -parseInt(step.rotate.z, 10),
            },
            scale: {
                x: 1 / parseFloat(step.scale.x),
                y: 1 / parseFloat(step.scale.y),
                z: 1 / parseFloat(step.scale.z),
            },
            translate: {
                x: -step.translate.x,
                y: -step.translate.y,
                z: -step.translate.z
            }
        };

select(target);
                event.stopImmediatePropagation();
                event.preventDefault();
			}
        };

window.addEventListener("touchend", clickEventer,false);

// delegated handler for clicking on the links to presentation steps
        document.addEventListener("click", clickEventer, false);
        
        
        // touch handler to detect taps on the left and right side of the screen
        document.addEventListener("touchstart", function ( event ) {
            if (event.touches.length === 1) {
	            var active = $(".step.active", impress);
	            var next = active;
                var x = event.touches[0].clientX,
                    width = window.innerWidth * 0.3,
                    result = null;
                    
                if ( x < width ) {
                         next = steps.indexOf( active ) - 1;
                         next = next >= 0 ? steps[ next ] : steps[ steps.length-1 ];
                } else if ( x > window.innerWidth - width ) {
                         next = steps.indexOf( active ) + 1;
                         next = next < steps.length ? steps[ next ] : steps[ 0 ];
                }
                
                event.preventDefault();
            }
        }, false);

// Sometimes it's possible to trigger focus on first link with some keyboard action.
    // Browser in such a case tries to scroll the page to make this element visible
    // (even that body overflow is set to hidden) and it breaks our careful positioning.
    //
    // So, as a lousy (and lazy) workaround any scroll event will make the page scroll back to the top.
    //
    // If you are reading this and know any better way to handle it, I'll be glad to hear about it!
    window.addEventListener("scroll", function ( event ) {
        window.scrollTo(0, 0);
    }, false);
    
    setTimeout(function() {
      window.scrollTo(0, 1);
    },0);

window.addEventListener('orientationchange',function() {
      var meta = document.createElement("meta");
      meta.name = "apple-mobile-web-app-capable";
      meta.content = 'yes';
      $$("head")[0].appendChild(meta );
      setTimeout(function() { window.scrollTo(0,1); }, 0);
    });

// START 
    // by selecting first step of presentation
    select(steps[4]);
	steps[4].classList.remove("active");

css(canvas, {
    	transform: scale({x: 0.4, y:0.4, z:0.4}, true),
		transitionDelay:  "0ms"
	});

steps.forEach(function ( el, idx ) {
        el.classList.add("initial");
    });

})(document, window);

<html>
    <head>
	<meta charset="UTF-8" />
	<meta http-equiv="cache-control" content="no-cache">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>impress.js + menu testing</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="telephone=no"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    </head>
    <body bgcolor="#ffffff" text="#696969" link="#669966" vlink="#ff3333">
    <div id="impress">
	<div href="" class="step" data-scale="1" data-x="-240" data-y="-240" data-rotate="270" >
		<span class="menu">Google</span>
		<span class="submenu"><a href="http://www.google.co.jp">google</a></span>
    	</div>
	<div href="" class="step" data-scale="1" data-x="0" data-y="-240">
		<span class="menu">Yahoo</span>
		<span class="submenu"><a href="http://www.yahoo.co.jp">yahoo japan</a></span>
	</div>
	<div href="" class="step" data-scale="1" data-x="240" data-y="-240">
		<span class="menu">Twitter</span>
		<span class="submenu"><a href="http://twitter.jp">twitter</a></span>
	</div>
	<div href="" class="step" data-scale="1" data-x="-240" data-y="0">
		<span class="menu">facebook</span>
		<span class="submenu"><a href="http://www.facebook.com">facebook</a></span>
	</div>
	<div href="" class="step" data-scale="1" data-x="0" data-y="0">
		<span class="menu">soundcloud</span>
		<span class="submenu"><a href="http://soundcloud.com">soundcloud</a></span>
	</div>
	<div href="" class="step" data-scale="1" data-x="240" data-y="0">
		<span class="menu">youtube</span>
		<span class="submenu"><a href="http://www.youtube.com">youtube</a></span>
	</div>
	<div href="" class="step" data-scale="1" data-x="-240" data-y="240">
		<span class="menu">mixi</span>
		<span class="submenu"><a href="http://mixi.jp">mixi</a></span>
	</div>
	<div href="" class="step" data-scale="1" data-x="0" data-y="240">
		<span class="menu">ニコニコ動画</span>
		<span class="submenu"><a href="http://www.nicovideo.jp/">ニコニコ動画</a></span>
	</div>
	<div href="" class="step" data-scale="1" data-x="240" data-y="240">
		<span class="menu">はてな</span>
		<span class="submenu"><a href="http://www.hatena.ne.jp">はてな</a></span>
	</div>
</div>
<script>impress().init();</script>
</body>
</html>

impress.js メニューテスト

/**
 * This is a stylesheet for a demo presentation for impress.js
 * 
 * It is not meant to be a part of impress.js and is not required by impress.js.
 * I expect that anyone creating a presentation for impress.js would create their own
 * set of styles.
 */

/* 
   v2.0 | 20120322
   License: public domain
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    -webkit-font-smoothing: antialiased;
}

b, strong { font-weight: bold }
i, em { font-style: italic}

/* enable clicking on elements 'hiding' behind body in 3D */
body     { pointer-events: none; }
#impress { pointer-events: auto; }

/* COMMON STEP STYLES */
.step {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    -ms-box-sizing:     border-box;
    -o-box-sizing:      border-box;
    box-sizing:         border-box;

}

.step {
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -ms-transition:     opacity 0.5s;
    -o-transition:      opacity 0.5s;
    transition:         opacity 0.5s;
}

/* fade out active slides */
.step:not(.active,.initial) {
    opacity: 0.5;
}

:not(.active) .submenu {
	visibility: hidden;
}

:not(.active) .menu {
	visibility: visible;
}

.active .submenu {
	visibility: visible;
}

.active .menu {
	visibility: hidden;
}

/* STEP SPECIFIC STYLES */
/* IMPRESS NOT SUPPORTED STYLES */

.fallback-message {
    font-family: sans-serif;
    line-height: 1.3;
    
    display: none;
    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;

border-radius: 10px;
    border: 1px solid #E4C652;
    background: #EEDC94;
}

.fallback-message p {
    margin-bottom: 10px;
}

.impress-disabled .step, .impress-not-supported .step {
    position: relative;
    opacity: 1;
    margin: 20px auto;
}

.impress-not-supported .fallback-message {
    display: block;
}

/* =--------------------------= */
body {
	width: 100%;
	vertical-align: middle;
	text-align: center;
	font-size: 120%;
	background:#E1E1E1;
}
ul.menubox {
}

.step {
	text-align: center;
	width: 225px;
	height: 225px;
	display: display;
	line-height: 225px;
	margin: 10px;
	border-radius:5px 5px 5px 5px;
	box-shadow:0px 0px 2px #666;
	border:1px solid #B6B6B6;
	background:#fff;
	float: left;
}

impress.js でメニューインターフェイスを表示するテストです。スマートフォンなどでも参照できるよう調整されたものをベースにしています。参考URL: http://bartaz.github.com/impress.js/ http://cykod.github.com/impress.js//** * impress.js * * impress.js is a presentation tool based on the power of CSS3 transforms and transitions * in modern browsers and inspired by the idea behind prezi.com. * * MIT Licensed. * * Copyright 2011 Bartek Szopka (@bartaz) */ (function ( document, window ) { // HELPER FUNCTIONS var pfx = (function () { var style = document.createElement('dummy').style, prefixes = 'Webkit Moz O ms Khtml'.split(' '), memory = {}; return function ( prop ) { if ( typeof memory[ prop ] === "undefined" ) { var ucProp = prop.charAt(0).toUpperCase() + prop.substr(1), props = (prop + ' ' + prefixes.join(ucProp + ' ') + ucProp).split(' '); memory[ prop ] = null; for ( var i in props ) { if ( style[ props[i] ] !== undefined ) { memory[ prop ] = props[i]; break; } } } return memory[ prop ]; } })(); var arrayify = function ( a ) { return [].slice.call( a ); }; var css = function ( el, props ) { var key, pkey; for ( key in props ) { if ( props.hasOwnProperty(key) ) { pkey = pfx(key); if ( pkey != null ) { el.style[pkey] = props[key]; } } } return el; } var $ = function ( selector, context ) { context = context || document; return context.querySelector(selector); }; var $$ = function ( selector, context ) { context = context || document; return arrayify( context.querySelectorAll(selector) ); }; var translate = function ( t ) { return " translate3d(" + t.x + "px," + t.y + "px," + t.z + "px) "; }; var rotate = function ( r, revert ) { var rX = " rotateX(" + r.x + "deg) ", rY = " rotateY(" + r.y + "deg) ", rZ = " rotateZ(" + r.z + "deg) "; return revert ? rZ+rY+rX : rX+rY+rZ; }; var scale = function ( s ) { return " scaleX(" + s.x + ") scaleY(" + s.y + ") scaleZ(" + s.z + ") "; } // CHECK SUPPORT var ua = navigator.userAgent.toLowerCase(); var impressSupported = ( pfx("perspective") != null ); // && // ( ua.search(/(iphone)|(ipod)|(ipad)|(android)/) == -1 ); // DOM ELEMENTS var impress = document.getElementById("impress"); if (!impressSupported) { impress.className = "impress-not-supported"; return; } else { impress.className = ""; } var canvas = document.createElement("div"); canvas.className = "canvas"; arrayify( impress.childNodes ).forEach(function ( el ) { canvas.appendChild( el ); }); impress.appendChild(canvas); var steps = $$(".step", impress); var submenus = $$(".submenu", impress); // SETUP // set initial values and defaults document.documentElement.style.height = "100%"; css(document.body, { height: "100%", overflow: "hidden" }); var props = { position: "absolute", transformOrigin: "top left", transition: "all 1s ease-in-out", transformStyle: "preserve-3d" } css(impress, props); css(impress, { top: "50%", left: "50%", perspective: "1000px" }); css(canvas, props); var current = { translate: { x: 0, y: 0, z: 0 }, rotate: { x: 0, y: 0, z: 0 }, scale: { x: 1, y: 1, z: 1 } }; var $positioning = function ( el, idx ) { var data = el.dataset, step = { translate: { x: data.x || 0, y: data.y || 0, z: data.z || 0 }, rotate: { x: data.rotateX || 0, y: data.rotateY || 0, z: data.rotateZ || data.rotate || 0 }, scale: { x: data.scaleX || data.scale || 1, y: data.scaleY || data.scale || 1, z: data.scaleZ || 1 } }; el.stepData = step; if ( !el.id ) { el.id = el.classList[0] + "-" + idx; } css(el, { position: "absolute", transform: "translate(-50%,-50%)" + translate(step.translate) + rotate(step.rotate) + scale(step.scale), transformStyle: "preserve-3d" }); }; steps.forEach($positioning); // submenus.forEach($positioning); // making given step active var select = function ( el ) { var step = el.stepData; if (!el.id) { return; } if ( $$(".step.active", impress) ) { // $(".step.active", impress).classList.remove("active"); $$(".step.active", impress).forEach(function ( ela, idx ) { if (el.id != ela.id) { ela.classList.remove("active"); } else { css(canvas, { transform: scale({x: 0.4, y:0.4, z:0.4}, true), transitionDelay: "0ms" }); } }); } // alert(el.id); el.classList.add("active"); impress.className = "step-" + el.id; var target = { rotate: { x: -parseInt(step.rotate.x, 10), y: -parseInt(step.rotate.y, 10), z: -parseInt(step.rotate.z, 10), }, scale: { x: 1 / parseFloat(step.scale.x), y: 1 / parseFloat(step.scale.y), z: 1 / parseFloat(step.scale.z), }, translate: { x: -step.translate.x, y: -step.translate.y, z: -step.translate.z } }; var zoomin = target.scale.x > current.scale.x; css(impress, { transform: scale(target.scale), transitionDelay: (zoomin ? "200ms" : "0ms") }); css(canvas, { transform: rotate(target.rotate, true) + translate(target.translate), transitionDelay: (zoomin ? "0ms" : "200ms") }); current = target; } // EVENTS document.addEventListener("keydown", function ( event ) { if ( event.keyCode == 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) { var active = $(".step.active", impress); var next = active; switch( event.keyCode ) { case 33: ; // pg up case 37: ; // left case 38: // up next = steps.indexOf( active ) - 1; next = next >= 0 ? steps[ next ] : steps[ steps.length-1 ]; break; case 9: ; // tab case 32: ; // space case 34: ; // pg down case 39: ; // right case 40: // down next = steps.indexOf( active ) + 1; next = next < steps.length ? steps[ next ] : steps[ 0 ]; break; } select(next); event.preventDefault(); } }, false); var clickEventer = function ( event ) { // event delegation with "bubbling" // check if event target (or any of its parents is a link) var target = event.target; while ( (target.tagName !== "A" && target.tagName !== "DIV") && (target !== document.documentElement) ) { target = target.parentNode; } if ( target.tagName === "A" && $(".step.active")) { var href = target.getAttribute("href"); location.href = href; // if it's a link to presentation step, target this step if ( href && href[0] === '#' ) { target = document.getElementById( href.slice(1) ); } return true; } else { select(target); event.stopImmediatePropagation(); event.preventDefault(); } }; window.addEventListener("touchend", clickEventer,false); // delegated handler for clicking on the links to presentation steps document.addEventListener("click", clickEventer, false); // touch handler to detect taps on the left and right side of the screen document.addEventListener("touchstart", function ( event ) { if (event.touches.length === 1) { var active = $(".step.active", impress); var next = active; var x = event.touches[0].clientX, width = window.innerWidth * 0.3, result = null; if ( x < width ) { next = steps.indexOf( active ) - 1; next = next >= 0 ? steps[ next ] : steps[ steps.length-1 ]; } else if ( x > window.innerWidth - width ) { next = steps.indexOf( active ) + 1; next = next < steps.length ? steps[ next ] : steps[ 0 ]; } event.preventDefault(); } }, false); // Sometimes it's possible to trigger focus on first link with some keyboard action. // Browser in such a case tries to scroll the page to make this element visible // (even that body overflow is set to hidden) and it breaks our careful positioning. // // So, as a lousy (and lazy) workaround any scroll event will make the page scroll back to the top. // // If you are reading this and know any better way to handle it, I'll be glad to hear about it! window.addEventListener("scroll", function ( event ) { window.scrollTo(0, 0); }, false); setTimeout(function() { window.scrollTo(0, 1); },0); window.addEventListener('orientationchange',function() { var meta = document.createElement("meta"); meta.name = "apple-mobile-web-app-capable"; meta.content = 'yes'; $$("head")[0].appendChild(meta ); setTimeout(function() { window.scrollTo(0,1); }, 0); }); // START // by selecting first step of presentation select(steps[4]); steps[4].classList.remove("active"); css(canvas, { transform: scale({x: 0.4, y:0.4, z:0.4}, true), transitionDelay: "0ms" }); steps.forEach(function ( el, idx ) { el.classList.add("initial"); }); })(document, window); <html> <head> <meta charset="UTF-8" /> <meta http-equiv="cache-control" content="no-cache"> <meta name="apple-mobile-web-app-capable" content="yes" /> <title>impress.js + menu testing</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> </head> <body bgcolor="#ffffff" text="#696969" link="#669966" vlink="#ff3333"> <div id="impress"> <div href="" class="step" data-scale="1" data-x="-240" data-y="-240" data-rotate="270" > <span class="menu">Google</span> <span class="submenu"><a href="http://www.google.co.jp">google</a></span> </div> <div href="" class="step" data-scale="1" data-x="0" data-y="-240"> <span class="menu">Yahoo</span> <span class="submenu"><a href="http://www.yahoo.co.jp">yahoo japan</a></span> </div> <div href="" class="step" data-scale="1" data-x="240" data-y="-240"> <span class="menu">Twitter</span> <span class="submenu"><a href="http://twitter.jp">twitter</a></span> </div> <div href="" class="step" data-scale="1" data-x="-240" data-y="0"> <span class="menu">facebook</span> <span class="submenu"><a href="http://www.facebook.com">facebook</a></span> </div> <div href="" class="step" data-scale="1" data-x="0" data-y="0"> <span class="menu">soundcloud</span> <span class="submenu"><a href="http://soundcloud.com">soundcloud</a></span> </div> <div href="" class="step" data-scale="1" data-x="240" data-y="0"> <span class="menu">youtube</span> <span class="submenu"><a href="http://www.youtube.com">youtube</a></span> </div> <div href="" class="step" data-scale="1" data-x="-240" data-y="240"> <span class="menu">mixi</span> <span class="submenu"><a href="http://mixi.jp">mixi</a></span> </div> <div href="" class="step" data-scale="1" data-x="0" data-y="240"> <span class="menu">ニコニコ動画</span> <span class="submenu"><a href="http://www.nicovideo.jp/">ニコニコ動画</a></span> </div> <div href="" class="step" data-scale="1" data-x="240" data-y="240"> <span class="menu">はてな</span> <span class="submenu"><a href="http://www.hatena.ne.jp">はてな</a></span> </div> </div> <script>impress().init();</script> </body> </html>/** * This is a stylesheet for a demo presentation for impress.js * * It is not meant to be a part of impress.js and is not required by impress.js. * I expect that anyone creating a presentation for impress.js would create their own * set of styles. */ /* v2.0 | 20120322 License: public domain */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } body { -webkit-font-smoothing: antialiased; } b, strong { font-weight: bold } i, em { font-style: italic} /* enable clicking on elements 'hiding' behind body in 3D */ body { pointer-events: none; } #impress { pointer-events: auto; } /* COMMON STEP STYLES */ .step { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } .step { -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s; } /* fade out active slides */ .step:not(.active,.initial) { opacity: 0.5; } :not(.active) .submenu { visibility: hidden; } :not(.active) .menu { visibility: visible; } .active .submenu { visibility: visible; } .active .menu { visibility: hidden; } /* STEP SPECIFIC STYLES */ /* IMPRESS NOT SUPPORTED STYLES */ .fallback-message { font-family: sans-serif; line-height: 1.3; display: none; width: 780px; padding: 10px 10px 0; margin: 20px auto; border-radius: 10px; border: 1px solid #E4C652; background: #EEDC94; } .fallback-message p { margin-bottom: 10px; } .impress-disabled .step, .impress-not-supported .step { position: relative; opacity: 1; margin: 20px auto; } .impress-not-supported .fallback-message { display: block; } /* =--------------------------= */ body { width: 100%; vertical-align: middle; text-align: center; font-size: 120%; background:#E1E1E1; } ul.menubox { } .step { text-align: center; width: 225px; height: 225px; display: display; line-height: 225px; margin: 10px; border-radius:5px 5px 5px 5px; box-shadow:0px 0px 2px #666; border:1px solid #B6B6B6; background:#fff; float: left; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

nodat

主にWeb系のシステム開発をしています。三児のパパ。好きなもの：ドキュメンタリー番組、Ｂ級ドラマ、イサム・ノグチ、安藤忠雄、あんこ系和菓子、フリーソウルとジャミロクワイ（アシッドジャズ、ジャズファンクなどクラブジャズ系全般）。

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/qUK9/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

takah

tjoen

thleap

impress.js メニューテスト

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Discussion

Tags

Favorite by