forked: Web Creator's Contest Q the 2nd【vol.2】エントリー用コード

Readme
JavaScript 2 lines
HTML 57 lines
CSS 190 lines

forked: Web Creator's Contest Q the 2nd【vol.2】エントリー用コード

<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,'ＭＳ Ｐゴシック',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,'ＭＳＰゴシック',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; } }