PKõ¸J?Áô(k/k/ index.html forked: Cubic Transition - js do it

自分を、ためす。未来を、ひらく。
“Q”は、すべてのWebクリエイターのための
アイデア&スキルコンテストです。

About "Q"

Vol.1

夏を涼しくする表現にチャレンジしてください

気づけば今年も暑い夏の季節がやってきました。
HTML5、JavaScript、CSSを駆使して、暑い夏をひんやり涼しくするような作品をつくってください。
お手本コードのような水が流れる作品や、風を感じる作品、花火などなど、どんな表現でも構いません。
あなたの得意分野でチャレンジしてみてください!下記のお手本コードをFork(=あなたなりのアレンジ)すると自動的にエントリーとなります。自由な発想をお待ちしています!

Schedule

作品投稿期間
7.26 木 〜 8.22 水
審査期間
8.23 木 〜 8.31 金
結果発表
9.4 火

Award

GOLD
ルンバ780
SILVER
Nintendo 3DS LL
BRONZE
WebMoney 5,000円分

Sponsor

Vol.2

魅力的な画面遷移をつくってください

画面が切り替わる際の演出を魅力的につくってください。
サンプルコードでは3つの画面をフェードイン・フェードアウトで切り替えています。
こちらを元にして演出を加えても良いですし、もちろんJavaScript, HTML, CSSをゼロからコードを書き直してもOKです。
複数の画面をクリックなどで切り替えるものであれば、自由に作成していただいて構いません。
画面遷移であればスライドを切り替えるような演出であったり、スマートフォンのトランジションでも良いので、あなたの得意分野でチャレンジしてください。
下記のお手本コードをFork(=あなたなりのアレンジ)すると自動的にエントリーとなります。自由な発想をお待ちしています!

Schedule

作品投稿期間
8.23 木 〜 9.19 水
審査期間
9.20 木 〜 9.28 金
結果発表
10.2 火

Award

GOLD
プレイステーション3+torne+nasne
SILVER
Wii + 『ドラゴンクエストX 目覚めし五つの種族 オンライン』
BRONZE
WebMoney 5,000円分

Sponsor

Vol.3

comming soon.

9/20 公開予定

About Q

Web Creator’s Contest『Q(キュー)』は、
株式会社リクルートが運営する、
誰もが参加できるWebクリエイターのための腕試し企画です。

あなたがお題に挑戦し作品を投稿することで、
あなたのアイデアやスキルを全世界に向けて発信することができます。

あなたがお題に挑戦し投稿した作品がものであれば、
協賛企業各社からスカウトメールがBiz-IQ上で届くこともあります。
Webクリエイターとしてのあなたのキャリアの未来を拓くきっかけにもなり得ます。
さらに、優秀者には豪華賞品を贈呈します。

Webクリエイターの技術やスキルがもっと世の中に評価されてもいい、
私たちはそう考えています。
あなたのWebクリエイター魂を、見せてください。

Qへの参加方法

  1. 1 まずは、お題に挑戦してください。
  2. 2 お題を解くヒントがほしい時、技術的な壁にぶつかったとき、
    『Q(キュー)』への参加と同時に登録できるビジネスSNS Biz-IQ上で、
    一緒に参加しているWebクリエイターのみんなに質問をしてみてください。
    お互いに切磋琢磨しながら、作品のレベルも上げていけるはずです。
  3. 3 作品を投稿し終わったら、審査結果を待ちます。
  4. 4 優秀者には豪華賞品を贈呈。さらに、「この人は!」という方には、
    協賛企業各社からスカウトメールがBiz-IQ上で届くこともあります。
  5. 5 『Q(キュー)』終了後も、 ビジネスSNS Biz-IQ上で、
    参加者であるWebクリエイター同士でコミュニケーションをとることが可能です。
    仕事を進めていく上での情報交換や情報収集、ビジネスパートナー探しにも
    活用できます。
PKõ¸J½C姏GGindex.js// forked from akm2's "Cubic Transition" http://jsdo.it/akm2/b81C // forked from Event's "Web Creator's Contest Q the 2nd【vol.2】エントリー用コード" http://jsdo.it/Event/zojr (function(window, requestAnimationFrame, cancelAnimationFrame) { // Run $(initialize); //--------------------------- // CONSTANTS //--------------------------- var TOP_ID = 'qtop'; // トップページを示す id var ABOUT_ID = 'about'; // アバウトページを示す id var ABOUT_BG_IMG = 'http://jsrun.it/assets/o/P/g/v/oPgvh.png'; // About の背景画像 var CONTENT_MAX_WIDTH = 800; // コンテンツの最大幅 var CONTENT_ID_SUFFIX = '-content'; // アンカーリンクでの移動を避ける為に id に付与するサフィックス //--------------------------- // VARS //--------------------------- // 要素の jQuery オブジェクト var $window, $body, $container, $cube, $contents, $nav, $background; // ベンダープレフィックスとプロパティ名 var prefix = Akm2.Vendor.prefix; var prefixHyphen = prefix ? '-' + prefix.toLowerCase() + '-' : ''; var transformKey = getVendorProperty('transform'); var transitionDurationKey = getVendorProperty('transitionDuration'); var perspectiveOriginKey = getVendorProperty('perspectiveOrigin'); // jQuery.css() で使用する設定用オブジェクト var containerStyle = {}, cubeStyle = {}, contentStyles = { current: { opacity: 1, zIndex: 2 }, prev: { opacity: 0, zIndex: 0 }, next: { opacity: 0, zIndex: 1 } }; backgroundAtAboutStyle = { backgroundPosition: '50% 180px', backgroundRepeat: 'no-repeat', backgroundImage: 'none' }; var width, height; // ウィンドウサイズ var naviButtonsList = []; // ナビゲーションボタン要素のリスト var contentsIdList = []; // コンテンツ id のリスト var currentIndex; // 現在のインデックス var zLength; // cube, コンテンツに設定する z 距離 var cubeTransitionIsFirstSec = false; // cube のモーションが最初の段階であることを示す var backgroundEffect; // バックグラウンド描画用の SunburstEffect クラスインスタンス //--------------------------- // INITIALIZE //--------------------------- function initialize() { $window = $(window); $body = $('body'); $nav = $('#navi'); $container = $('#container'); $cube = $('#cube'); $contents = $('.content'); // 背景用 canvas を取得して背景描画用オブジェクトを初期化 $background = $('#background'); backgroundEffect = new SunburstEffect($background[0], 16, 233, 330); // ナビゲーションのボタンをコンテンツと対応させる var $buttons = $('#navi li'); $contents.each(function(i) { var $content = $(this); // コンテンツの id を取得して配列に格納 var id = $content.attr('id'); contentsIdList.push(id || null); // ハッシュの変更でジャンプしてしまわないよう id にサフィックスを追加 if (id) $content.attr('id', id + CONTENT_ID_SUFFIX); // 対応するボタンを取得する, コンテンツへのアンカー指定のあるリンクを子として持つリストアイテムをコンテンツの順で配列に格納 var $targetButton = null; $buttons.each(function() { var $button = $(this); if ($button.children('a:first-child').attr('href') === '#' + id) { $targetButton = $button; return false; } }); naviButtonsList[i] = $targetButton; }); // スクロール用に要素をキャッシュ var $html_body = $('html, body'); // 全てのリンクを走査 $('a').each(function(i) { var $link = $(this); var href = $link.attr('href'); // リンクがハッシュなら if (href && href.search(/^#/) > -1) { // 対象コンテンツのインデックスを取得 var targetIndex = contentsIdList.indexOf(href.replace(/^#/, '')); // ハッシュが示す id がコンテンツに存在しなければ continue if (targetIndex < 0) return true; // リンクにクリックイベントリスナーを追加 $link.on('click', function(e) { if ( currentIndex === targetIndex || // 現在のインデックスと同じなら抜ける targetIndex < 0 || targetIndex >= $contents.length // インデックスが範囲外なら抜ける ) return; setNaviActiveButton(targetIndex); contentsTransition(targetIndex); // 一番上までスクロール $html_body.animate({ scrollTop: 0 }, 600); // アンカーを無効に e.preventDefault(); }); } }); // cube のトランジション完了を監視, モーションの進捗の判定用 // jQuery を使用すると Opera でリスナーが登録できないっぽいけど 3D Transform のみなので無視 $cube.on(Akm2.Vendor.transitionend, onCubeTransitionEnd); // URL ハッシュの変更を監視 $window.on('hashchange', onWindowHashChange); // ウィンドウのリサイズを監視, translateZ を更新する $window.on('resize', onWindowResize); onWindowResize(null); // ハッシュから現在のインデックスを取得 currentIndex = getTargetIndexFromHash(); // スクロールを監視, perspective-origin を更新する $window.on('scroll', onWindowScroll); onWindowScroll(null); // ナビゲーションの状態を設定 setNaviActiveButton(currentIndex); // コンテンツの状態を設定, トランジションが無効の状態で実行 $contents.each(function(i) { var $content = $(this); if (i === currentIndex) $content.css(contentStyles.current).removeClass('hide'); else if (i < currentIndex) $content.css(contentStyles.prev).addClass('hide'); else if (i > currentIndex) $content.css(contentStyles.next).addClass('hide'); }); // トップの状態を設定, トランジションが無効の状態で実行, $body にアクセスするので先に初期化しておく specialContentEffectsEnable(currentIndex); // body のトランジションを有効にする $body.addClass('transition-enable'); // コンテンツを表示 $cube.fadeIn('first'); } //--------------------------- // EVENT HANDLERS //--------------------------- /** * Window 'resize' listener */ function onWindowResize(e) { width = window.innerWidth; height = window.innerHeight; // ウィンドウサイズから z 座標の距離を決定する zLength = (width > CONTENT_MAX_WIDTH ? CONTENT_MAX_WIDTH : width) * 0.5 | 0; // コンテンツと cube の z 方向移動値を更新する contentStyles.current[transformKey] = 'rotateY( 0deg) translateZ(' + zLength + 'px)'; contentStyles.prev[transformKey] = 'rotateY(-90deg) translateZ(' + zLength + 'px)'; contentStyles.next[transformKey] = 'rotateY( 90deg) translateZ(' + zLength + 'px)'; $contents.each(function(i) { var $content = $(this); if (i === currentIndex) $content.css(contentStyles.current); else if (i < currentIndex) $content.css(contentStyles.prev); else if (i > currentIndex) $content.css(contentStyles.next); }); cubeStyle[transformKey] = 'translateZ(' + -zLength + 'px)'; $cube.css(cubeStyle); // トップの背景効果の描画サイズを設定 backgroundEffect.setSize(width, height); } /** * Window 'scroll' listener */ function onWindowScroll(e) { var scrollTop = $window.scrollTop(); var originY = Math.floor(scrollTop ? scrollTop / height * 100 : 0) + 20; // スクロール位置に応じて perspectiveOrigin を更新する, 速度を優先して jQuery.css() を使用しない $container[0].style[perspectiveOriginKey] = '50% ' + originY + '%'; } /** * Window 'hashchange' listener */ function onWindowHashChange(e) { var targetIndex = getTargetIndexFromHash(); // 現在のインデックスと同じなら抜ける if (currentIndex === targetIndex) return; setNaviActiveButton(targetIndex); contentsTransition(targetIndex); } /** * Content element 'transitionend' listener */ function onContentTransitionEnd(e) { var $content = $(this).removeClass('transition-enable'); $content[0].removeEventListener(Akm2.Vendor.transitionend, onContentTransitionEnd, false); if ($contents.index($content) === currentIndex) { // イベントの対象コンテンツが現在のコンテンツならハッシュを更新 window.location.hash = contentsIdList[currentIndex]; } else { // 現在のコンテンツでなければ隠す $content.addClass('hide'); } } /** * Cube element 'transitionend' listener */ function onCubeTransitionEnd(e) { if (cubeTransitionIsFirstSec) { // cube が遠ざかるモーションなら近づくモーションへ移行 cubeTransitionIsFirstSec = false; cubeStyle[transitionDurationKey] = '.45s'; cubeStyle[transformKey] = 'translateZ(' + -zLength + 'px)'; $cube.css(cubeStyle); } } //--------------------------- // FUNCTIONS //--------------------------- /** * コンテンツを遷移させる * * @param targetIndex 対象コンテンツのインデックス */ function contentsTransition(targetIndex) { specialContentEffectsEnable(targetIndex); // cube のモーション, keyframes では移動中の遷移でタイミングがあわせづらいので transition をはしごする // まずは遠ざかる動作を開始, transitionend リスナーが実行されて元の位置へ戻る cubeTransitionIsFirstSec = true; cubeStyle[transitionDurationKey] = '.25s'; cubeStyle[transformKey] = 'translateZ(' + (-zLength - (zLength < 200 ? zLength : 200)) + 'px)'; $cube.css(cubeStyle); // コンテンツの状態を設定 $contents.each(function(i) { var $content = $(this); if (i === targetIndex || i === currentIndex) { // 遷移先と現在のコンテンツのみモーションするように $content .removeClass('hide') .addClass('transition-enable'); // Opera でリスナーが登録できなかったので jQuery を使用せず直接リスナーを登録する $content[0].addEventListener(Akm2.Vendor.transitionend, onContentTransitionEnd, false); } if (i === targetIndex) $content.css(contentStyles.current); else if (i < targetIndex) $content.css(contentStyles.prev); else if (i > targetIndex) $content.css(contentStyles.next); }); currentIndex = targetIndex; } /** * 特別ページの効果を設定する * * @param targetIndex 対象のインデックス, インデックスが示す id が 特別ページの id と一致すれば有効に, 一致しなければ無効にする */ function specialContentEffectsEnable(targetIndex) { var currentId = contentsIdList[targetIndex]; var isTop = currentId === TOP_ID; var isAbout = currentId === ABOUT_ID; if (isAbout) { $body.addClass('at-about'); backgroundAtAboutStyle.backgroundImage = 'url(' + ABOUT_BG_IMG + ')'; } else { $body.removeClass('at-about'); backgroundAtAboutStyle.backgroundImage = 'none'; } $background.css(backgroundAtAboutStyle); if (isTop || isAbout) { backgroundEffect.startRender(); $background.removeClass('hide'); } else { backgroundEffect.stopRender(); $background.addClass('hide'); } if (isTop) { $body.addClass('at-top'); $nav.addClass('hide'); } else { $body.removeClass('at-top'); $nav.removeClass('hide'); } } /** * 対象コンテンツに対応するナビゲーションボタンを設定する * * @param targetIndex 対象コンテンツのインデックス */ function setNaviActiveButton(targetIndex) { $.each(naviButtonsList, function(i, $button) { if ($button.hasClass('active')) $button.removeClass('active'); if (i === targetIndex) $button.addClass('active'); }); } /** * URL ハッシュに対応するコンテンツのインデックスを取得する * * @return 対象コンテンツのインデックス, ハッシュがない場合は 0 を返す */ function getTargetIndexFromHash() { var hash = window.location.hash; return hash ? contentsIdList.indexOf(hash.replace(/^#/, '')) || 0 : 0; } /** * 文字列にベンダープレフィックスを追加して返す * * @return プレフィックスを追加した文字列 */ function getVendorProperty(property) { return prefix ? prefix + property.charAt(0).toUpperCase() + property.slice(1) : property; } //--------------------------- // CLASS //--------------------------- /** * Sunburst * * @see http://jsdo.it/akm2/gxh2 */ function Sunburst(x, y, radius, num) { this.x = x || 0; this.y = y || 0; this.radius = radius || 0; this.setNum(num === undefined ? 10 : num); } Sunburst.prototype = { angle: 0, setNum: function(num) { this._step = Math.PI * 2 / Math.floor(num) * 0.5; this._num = num; }, render: function(ctx) { var x = this.x, y = this.y, angle = this.angle, radius = this.radius, step = this._step; var twoPi = Math.PI * 2; var twoStep = step * 2; ctx.beginPath(); for (var i = 0; i < twoPi; i += twoStep) { ctx.moveTo(x, y); ctx.arc(x, y, radius, angle + i, angle + i + step, false); ctx.closePath(); } ctx.fill(); } }; /** * SunburstEffect * * @param canvas 描画先の canvas * @param burstNum 光の数 * @param centerY 光の中心の y 座標, x 座標は指定されたサイズのセンター固定 * @param transparentSize グラデーションの中心からの透明部分のサイズ */ function SunburstEffect(canvas, burstNum, centerY, transparentSize) { var context = canvas.getContext('2d'); var animationId = null; var sunburst = new Sunburst(); sunburst.setNum(burstNum); this.setSize = function(width, height) { canvas.width = width; canvas.height = height; sunburst.x = width * 0.5; sunburst.y = centerY; var dy = height - sunburst.y; sunburst.radius = Math.sqrt(sunburst.x * sunburst.x + dy * dy); var stop = transparentSize / sunburst.radius; if (stop > 1) stop = 1; var grad = context.createRadialGradient(sunburst.x, sunburst.y, 65, sunburst.x, sunburst.y, sunburst.radius); grad.addColorStop(0, 'rgba(255, 255, 255, 0)'); grad.addColorStop(stop, 'rgba(255, 255, 255, 0.2)'); grad.addColorStop(1, 'rgba(255, 255, 255, 0.2)'); context.fillStyle = grad; }; this.startRender = function() { if (animationId) return; (function loop() { context.clearRect(0, 0, canvas.width, canvas.height); sunburst.render(context); sunburst.angle += 0.0025; animationId = requestAnimationFrame(loop); })(); }; this.stopRender = function() { cancelAnimationFrame(animationId); animationId = null; }; } })(window, Akm2.Vendor.requestAnimationFrame, Akm2.Vendor.cancelAnimationFrame); PKõ¸J¸pW©À<À< style.cssbody, div, dl, dt, dd, ul, ol, li, h1, p, section, header, footer, nav { margin: 0; padding: 0; } section, header, footer, nav { display: block; } li { list-style: none; } html, body { width: 100%; height: 100%; } body { position: relative; font-size: 12px; font-family: Myriad, Helvetica, Arial, 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro', 'Meiryo', 'メイリオ', sans-serif; background-color: #e8eff2; background-image: -webkit-radial-gradient(center center, circle contain, rgba(0, 0, 0, .15), transparent); background-image: -moz-radial-gradient(center center, circle contain, rgba(0, 0, 0, .15), transparent); background-image: -ms-radial-gradient(center center, circle contain, rgba(0, 0, 0, .15), transparent); background-image: -o-radial-gradient(center center, circle contain, rgba(0, 0, 0, .15), transparent); background-image: radial-gradient(center center, circle contain, rgba(0, 0, 0, .15), transparent); background-repeat: none; background-attachment: fixed; overflow-x: hidden; overflow-y: visible; } a { color: #2d96bc; text-decoration: none; } /* Use javascript */ body.transition-enable { -webkit-transition-property: height, background-color; -moz-transition-property: height, background-color; -ms-transition-property: height, background-color; -o-transition-property: height, background-color; transition-property: height, background-color; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -ms-transition-duration: .7s; -o-transition-duration: .7s; transition-duration: .7s; -webkit-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -moz-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -ms-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -o-transition-timing-function: cubic-bezier(.12, .51, .60, .87); transition-timing-function: cubic-bezier(.12, .51, .60, .87); } /* ---------------------------------- Navigation ---------------------------------- */ nav { position: relative; height: 42px; border-bottom: none; width: 100%; line-height: 40px; font-size: 12px; z-index: 10; overflow: hidden; border-bottom: 1px solid #fff; background-color: #283d44; background-image: -webkit-linear-gradient(top, transparent, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, .2)), -webkit-linear-gradient(top, #283d44 25%, #334d56); background-image: -moz-linear-gradient(top, transparent, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, .2)), -moz-linear-gradient(top, #283d44 25%, #334d56); background-image: -o-linear-gradient(top, transparent, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, .2)), -o-linear-gradient(top, #283d44 25%, #334d56); background-image: linear-gradient(top, transparent, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, .2)), linear-gradient(top, #283d44 25%, #334d56); -webkit-transition-property: height, border-bottom; -moz-transition-property: height, border-bottom; -ms-transition-property: height, border-bottom; -o-transition-property: height, border-bottom; transition-property: height, border-bottom; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -ms-transition-duration: .7s; -o-transition-duration: .7s; transition-duration: .7s; -webkit-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -moz-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -ms-transition-timing-function: cubic-bezier(.12, .51, .60, .87); -o-transition-timing-function: cubic-bezier(.12, .51, .60, .87); transition-timing-function: cubic-bezier(.12, .51, .60, .87); } nav > div { position: relative; margin: 0 auto; max-width : 800px; } nav ul, nav li { display: inline-block; } nav li { margin: 0 18px; } nav ul { margin-left: 125px; } nav a { color: rgba(255, 255, 255, .35); } nav a:hover { color: rgba(255, 255, 255, 1); } nav li.active a { color: #fff; text-shadow: 0px -1px 0 rgba(0, 0, 0, .5), 0 0 10px #fff, 0 0 8px #fff; } /* Logo button */ nav li.logo { margin: 0; padding: 0; position: absolute; top: 0; left: 20px; } nav li.logo a img { opacity: 0.5; -webkit-transition: opacity .2s linear; -moz-transition: opacity .2s linear; -ms-transition: opacity .2s linear; -o-transition: opacity .2s linear; transition: opacity .2s linear; } nav li.logo a:hover img { opacity: 1; } /* Use javascript */ nav.hide { height: 0; border-bottom: none; } /* ナビゲーションを隠した後にマウスアウトで出現してしまう問題を解決 */ nav.hide li.logo a img { opacity: 0; } /* ---------------------------------- Content ---------------------------------- */ /* Container */ #container { width: 100%; height: 100%; margin: 0 auto; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 20%; -moz-perspective-origin: 50% 20%; -ms-perspective-origin: 50% 20%; -o-perspective-origin: 50% 20%; perspective-origin: 50% 20%; } /* Cube */ #cube { display: none; /* 最初は非表示に */ position: relative; margin: 0 auto; max-width: 800px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -ms-transition-property: -ms-transform; -o-transition-property: -o-transform; transition-property: transform; -webkit-transition-duration: .35s; -moz-transition-duration: .35s; -ms-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-timing-function: ease-in; -moz-transition-timing-function: ease-in; -ms-transition-timing-function: ease-in; -o-transition-timing-function: ease-in; transition-timing-function: ease-in; } /* Page */ #cube > section { position: absolute; top: 0; left: 0; width: 100%; padding: 0 0 30px; color: #202020; text-shadow: 0 1px 0 #fff; line-height: 1.75; } /* Page header */ #cube > section > header { padding: 30px 40px 0 40px; margin: 0 0 15px; } #cube > section > header > p.label { display: inline-block; margin-bottom: 10px; padding: 5px 10px; font-size: 11px; line-height: 1em; color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); background-color: #67b4ce; background-image: -webkit-linear-gradient(top, #2d96bc, #67b4ce); background-image: -moz-linear-gradient(top, #2d96bc, #67b4ce); background-image: -ms-linear-gradient(top, #2d96bc, #67b4ce); background-image: -o-linear-gradient(top, #2d96bc, #67b4ce); background-image: linear-gradient(top, #2d96bc, #67b4ce); -webkit-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); -ms-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); -o-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; } #cube > section > header > h1 { font-size: 22px; font-weight: normal; } /* Page inner */ #cube > section > div { padding: 0 40px 20px 40px; } #cube > section > div p { margin: 20px 0; } #cube > section > div li, #cube > section > div dd { margin: 0 0 5px 25px; } #cube > section > div dt { margin-bottom: 5px; font-weight: bold; } #cube > section > div dd { font-size: 13px; } /* Page pager */ #cube > section > div .pager li { margin: 0; font-weight: bold; } #cube > section > div .pager li.prev { float: left; } #cube > section > div .pager li.next { float: right; } /* Page section */ #cube > section > div > section { margin: 0 0 35px; } #cube > section > div > section > h1 { padding: 5px 0 5px 3px; margin-bottom: 15px; font-size: 14px; font-weight: normal; border-top: 1px solid #888; border-bottom: 1px dotted #888; } /* Use javascript */ #cube > section.transition-enable { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -ms-transition-duration: .7s; -o-transition-duration: .7s; transition-duration: .7s; -webkit-transition-timing-function: cubic-bezier(.01, .58, .32, .98); -moz-transition-timing-function: cubic-bezier(.01, .58, .32, .98); -ms-transition-timing-function: cubic-bezier(.01, .58, .32, .98); -o-transition-timing-function: cubic-bezier(.01, .58, .32, .98); transition-timing-function: cubic-bezier(.01, .58, .32, .98); } #cube > section.hide { overflow: hidden; height: 0; } /* ---------------------------------- Top content ---------------------------------- */ /* Javascript で .content セレクタを指定した要素の id にはサフィックスを追加するので指定もサフィックスをつけて行う #top -> #qtop-content */ section#qtop-content { color: #fff; font-size: 14px; text-align: center; -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); -moz-text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); -ms-text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); -o-text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); } /* Title logo */ section#qtop-content > header { width: 180px; height: 110px; margin: 90px auto 10px; } /* Navigation */ section#qtop-content ul, section#qtop-content ul li { display: inline-block; } section#qtop-content ul { margin: 21px 0; } section#qtop-content ul li { margin: 0 10px; } section#qtop-content ul li a { color: #fff; font-size: 12px; text-shadow: none; width: 48px; height: 48px; line-height: 48px; display: inline-block; background-color: #283d44; background-image: url(http://jsrun.it/assets/o/Z/u/P/oZuP0.png); -webkit-border-radius: 24px; -moz-border-radius: 24px; -ms-border-radius: 24px; -o-border-radius: 24px; border-radius: 24px; -webkit-transition-property: background-color; -moz-transition-property: background-color; -ms-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -webkit-transition-duration: .2s; -moz-transition-duration: .2s; -ms-transition-duration: .2s; -o-transition-duration: .2s; transition-duration: .2s; -webkit-transition-timing-function: linear; -moz-transition-timing-function: linear; -ms-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear; } section#qtop-content ul li a:hover { background-color: #e25fb0; } section#qtop-content ul li.comingsoon a { background-color: #999; } section#qtop-content p.to-about a { font-size: 12px; color: #fff; } /* Use javascript */ body.at-top { background-color: #7ecddd; } /* ---------------------------------- About content ---------------------------------- */ /* Javascript で .content セレクタを指定した要素の id にはサフィックスを追加するので指定もサフィックスをつけて行う #about -> #about-content */ section#about-content ol { margin: 0; } section#about-content ol li { position: relative; padding: 0 0 0 25px; margin: 0 0 15px 0; } section#about-content ol li span.label { position: absolute; top: 0; left: 0; display: block; color: #fff; font-weight: 11px; width: 18px; height: 18px; line-height: 18px; text-align: center; text-shadow: 0 -1px 0 rgba(0, 0, 0, .2); background-color: #67b4ce; background-image: -webkit-linear-gradient(top, #2d96bc, #67b4ce); background-image: -moz-linear-gradient(top, #2d96bc, #67b4ce); background-image: -ms-linear-gradient(top, #2d96bc, #67b4ce); background-image: -o-linear-gradient(top, #2d96bc, #67b4ce); background-image: linear-gradient(top, #2d96bc, #67b4ce); -webkit-border-radius: 9px; -moz-border-radius: 9px; -ms-border-radius: 9px; -o-border-radius: 9px; border-radius: 9px; -webkit-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); -ms-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); -o-box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px #fff, 0 -1px 1px rgba(0, 0, 0, .2); } /* Use javascript */ body.at-about { background-color: #cce5ea; } /* ---------------------------------- Backgrounds ---------------------------------- */ canvas#background { position: fixed; top: 0; left: 0; z-index: 0; opacity: 1; -webkit-transition-property: opacity; -moz-transition-property: opacity; -ms-transition-property: opacity; -o-transition-property: opacity; transition-property: opacity; -webkit-transition-duration: .7s; -moz-transition-duration: .7s; -ms-transition-duration: .7s; -o-transition-duration: .7s; transition-duration: .7s; -webkit-transition-timing-function: cubic-bezier(.01, .58, .32, .98); -moz-transition-timing-function: cubic-bezier(.01, .58, .32, .98); -ms-transition-timing-function: cubic-bezier(.01, .58, .32, .98); -o-transition-timing-function: cubic-bezier(.01, .58, .32, .98); transition-timing-function: cubic-bezier(.01, .58, .32, .98); } /* Use javascript */ canvas#background.hide { opacity: 0; } PKõ¸J?Áô(k/k/ ¶index.htmlPKõ¸J½C姏GG¶“/index.jsPKõ¸J¸pW©À<À< ¶Hwstyle.cssPK¥/´