impress.js メニューテスト nodat Follow 2012-04-15 14:17:51 License: MIT License Fork0 Fav3 View1516 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 ]; } })(); 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> 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; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? impress.js でメニューインターフェイスを表示するテストです。 スマートフォンなどでも参照できるよう調整されたものをベースにしています。 参考URL: http://bartaz.github.com/impress.js/ http://cykod.github.com/impress.js/ Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author nodat 主にWeb系のシステム開発をしています。三児のパパ。好きなもの:ドキュメンタリー番組、B級ドラマ、イサム・ノグチ、安藤忠雄、あんこ系和菓子、フリーソウルとジャミロクワイ(アシッドジャズ、ジャズファンクなどクラブジャズ系全般)。 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/qUK9/js"></script> application html5_elements&api smartphone smartphones&tablets user_interface Discussion Questions on this code? Tags application html5_elements&api smartphone smartphones&tablets user_interface Favorite by takah tjoen thleap