Forked from: _konitter's forked: Web Creator's Contest Q the 2nd【vol.2】エントリ View Diff (1) forked: Web Creator's Contest Q the 2nd【vol.2】エントリー用コード rjidxjjdidi Follow 2016-05-21 19:57:05 License: MIT License Fork0 Fav0 View474 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 2 lines HTML 57 lines CSS 190 lines forked: Web Creator's Contest Q the 2nd【vol.2】エントリー用コード // forked from _konitter's "forked: Web Creator's Contest Q the 2nd【vol.2】エントリー用コード" http://jsdo.it/_konitter/con-q2 <nav> <ul> <li><a href="#p1">Vol.1</a></li> <li><a href="#p2">Vol.2</a></li> <li><a href="#p3">Vol.3</a></li> </ul> </nav> <div id="p1"> <div id="p2"> <div id="p3"> <section id="vol1"> <header> <h1>Vol. 1</h1> </header> <div> <p> 気づけば今年も暑い夏の季節がやってきました。<br> HTML5、JavaScript、CSSを駆使して、暑い夏をひんやり涼しくするような作品をつくってください。<br> お手本コードのような水が流れる作品や、風を感じる作品、花火などなど、どんな表現でも構いません。<br> あなたの得意分野でチャレンジしてみてください!下記のお手本コードをFork(=あなたなりのアレンジ)すると自動的にエントリーとなります。自由な発想をお待ちしています! </p> </div> </section> <section id="vol2"> <header> <h1>Vol. 2</h1> </header> <div> <p> 画面が切り替わる際の演出を魅力的につくってください。<br> サンプルコードでは3つの画面をフェードイン・フェードアウトで切り替えています。<br> こちらを元にして演出を加えても良いですし、もちろんJavaScript, HTML, CSSをゼロからコードを書き直してもOKです。<br> 複数の画面をクリックなどで切り替えるものであれば、自由に作成していただいて構いません。<br> 画面遷移であればスライドを切り替えるような演出であったり、スマートフォンのトランジションでも良いので、あなたの得意分野でチャレンジしてください。<br> 下記のお手本コードをFork(=あなたなりのアレンジ)すると自動的にエントリーとなります。自由な発想をお待ちしています! </p> </div> </section> <section id="vol3"> <header> <h1>Vol. 3</h1> </header> <div> <p> coming soon.<br> 9/20 公開予定 </p> </div> </section> </div> </div> </div> forked: Web Creator's Contest Q the 2nd【vol.2】エントリー用コード body,div,dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6, pre,code,p,blockquote,th,td, form,fieldset,legend { margin: 0; padding: 0; } section,nav,article,aside,hgroup, header,footer,figure,figcaption,details { display: block; } html { overflow-y: scroll; font-size: 100%; /*-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;*/ } body { line-height: 1.6; color: #333; font-family: Meiryo,'MS Pゴシック',sans-serif; font-size: 81%; } nav { position: fixed; z-index: 1000; top: -1px; width: 100%; height: 60px; background: #2e3740; } nav li { float: left; height: 60px; line-height: 60px; padding: 0 20px; } nav li a { display: block; height: 60px; color: #fff; text-decoration: none; } nav li a:hover { text-decoration: underline; } section { position: absolute; width: 100%; height: 100%; overflow: hidden; color: #fff; -webkit-transition: -webkit-transform .8s; -moz-transition: -moz-transform .8s; -o-transition: -o-transform .8s; transition: transform .8s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } section > * { position: absolute; padding: 0 5%; } section h1 { margin-top: 100px; margin-bottom: 30px; font-size: 185%; } section > div { top: 168px; /*margin-bottom: 80px;*/ } #vol1 { top: 0; background: #f0f0f0; color: #333; } #vol2 { top: 100%; background: #5cc1cb; } #vol3 { top: 200%; background: #d36361; } #p1:target section { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #p2:target section { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } #p3:target section { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); transform: translateY(-200%); } #p1:target #vol1 > * { -webkit-animation: slideDown .8s ease .5s both; -moz-animation: slideDown .8s ease .5s both; -o-animation: slideDown .8s ease .5s both; animation: slideDown .8s ease .5s both; } #p2:target #vol2 > *, #p3:target #vol3 > * { -webkit-animation: slideUp .8s ease .5s both; -moz-animation: slideUp .8s ease .5s both; -o-animation: slideUp .8s ease .5s both; animation: slideUp .8s ease .5s both; } #p1:target #vol1 > div, #p2:target #vol2 > div, #p3:target #vol3 > div { padding-top: 168px; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } /* slideUp */ @-webkit-keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } @-moz-keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } @-o-keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } @keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } /* slideDown */ @-webkit-keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } @-moz-keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } @-o-keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } @keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } // forked from _konitter's "forked: Web Creator's Contest Q the 2nd【vol.2】エントリー用コード" http://jsdo.it/_konitter/con-q2 <nav> <ul> <li><a href="#p1">Vol.1</a></li> <li><a href="#p2">Vol.2</a></li> <li><a href="#p3">Vol.3</a></li> </ul> </nav> <div id="p1"> <div id="p2"> <div id="p3"> <section id="vol1"> <header> <h1>Vol. 1</h1> </header> <div> <p> 気づけば今年も暑い夏の季節がやってきました。<br> HTML5、JavaScript、CSSを駆使して、暑い夏をひんやり涼しくするような作品をつくってください。<br> お手本コードのような水が流れる作品や、風を感じる作品、花火などなど、どんな表現でも構いません。<br> あなたの得意分野でチャレンジしてみてください!下記のお手本コードをFork(=あなたなりのアレンジ)すると自動的にエントリーとなります。自由な発想をお待ちしています! </p> </div> </section> <section id="vol2"> <header> <h1>Vol. 2</h1> </header> <div> <p> 画面が切り替わる際の演出を魅力的につくってください。<br> サンプルコードでは3つの画面をフェードイン・フェードアウトで切り替えています。<br> こちらを元にして演出を加えても良いですし、もちろんJavaScript, HTML, CSSをゼロからコードを書き直してもOKです。<br> 複数の画面をクリックなどで切り替えるものであれば、自由に作成していただいて構いません。<br> 画面遷移であればスライドを切り替えるような演出であったり、スマートフォンのトランジションでも良いので、あなたの得意分野でチャレンジしてください。<br> 下記のお手本コードをFork(=あなたなりのアレンジ)すると自動的にエントリーとなります。自由な発想をお待ちしています! </p> </div> </section> <section id="vol3"> <header> <h1>Vol. 3</h1> </header> <div> <p> coming soon.<br> 9/20 公開予定 </p> </div> </section> </div> </div> </div> body,div,dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6, pre,code,p,blockquote,th,td, form,fieldset,legend { margin: 0; padding: 0; } section,nav,article,aside,hgroup, header,footer,figure,figcaption,details { display: block; } html { overflow-y: scroll; font-size: 100%; /*-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;*/ } body { line-height: 1.6; color: #333; font-family: Meiryo,'MS Pゴシック',sans-serif; font-size: 81%; } nav { position: fixed; z-index: 1000; top: -1px; width: 100%; height: 60px; background: #2e3740; } nav li { float: left; height: 60px; line-height: 60px; padding: 0 20px; } nav li a { display: block; height: 60px; color: #fff; text-decoration: none; } nav li a:hover { text-decoration: underline; } section { position: absolute; width: 100%; height: 100%; overflow: hidden; color: #fff; -webkit-transition: -webkit-transform .8s; -moz-transition: -moz-transform .8s; -o-transition: -o-transform .8s; transition: transform .8s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } section > * { position: absolute; padding: 0 5%; } section h1 { margin-top: 100px; margin-bottom: 30px; font-size: 185%; } section > div { top: 168px; /*margin-bottom: 80px;*/ } #vol1 { top: 0; background: #f0f0f0; color: #333; } #vol2 { top: 100%; background: #5cc1cb; } #vol3 { top: 200%; background: #d36361; } #p1:target section { -webkit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #p2:target section { -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } #p3:target section { -webkit-transform: translateY(-200%); -moz-transform: translateY(-200%); -o-transform: translateY(-200%); transform: translateY(-200%); } #p1:target #vol1 > * { -webkit-animation: slideDown .8s ease .5s both; -moz-animation: slideDown .8s ease .5s both; -o-animation: slideDown .8s ease .5s both; animation: slideDown .8s ease .5s both; } #p2:target #vol2 > *, #p3:target #vol3 > * { -webkit-animation: slideUp .8s ease .5s both; -moz-animation: slideUp .8s ease .5s both; -o-animation: slideUp .8s ease .5s both; animation: slideUp .8s ease .5s both; } #p1:target #vol1 > div, #p2:target #vol2 > div, #p3:target #vol3 > div { padding-top: 168px; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; animation-delay: 1s; } /* slideUp */ @-webkit-keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } @-moz-keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } @-o-keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } @keyframes slideUp { 0% { top: 100%; } 100% { top: 0; } } /* slideDown */ @-webkit-keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } @-moz-keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } @-o-keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } @keyframes slideDown { 0% { top: -100%; } 100% { top: 0; } } use an iframe compat browser, deer 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 Author rjidxjjdidi 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/kN5P/js"></script> css css3 Q user_interface Discussion Questions on this code? Tags Q css css3 user_interface