シズイザアンソロの告知ページを制作しました。
http://www.k5.dion.ne.jp/~onim/3rdmarriage/
あとロゴ・冬コミ頒布のフライヤーも僕が担当しています。
解説
制作期間1.5日くらいで、サクッと作りました。遊べそうな部分は、（あまりあざとくない程度に）jQueryとかで遊んでみました。
HTML5+CSS3
最近のサイトはHTML5が多くなっているので、このページもHTML5+CSS3で作っています。ただし、アクセスするユーザーの殆どが女性なのでIEユーザーの比率がかなり高くなるだろうと予想されます。IE対策をしっかり行わないと悲惨なことになる予感がします…。
IEはHTML5（とMedia Queries）に対応していないので、別途jsを読み込んで対応する必要があります。
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
認証ページ
認証ページ（「ENTER」と出てるページ）を作るのが面倒だったので、位置固定のボックスをサイト全体にかぶせて、ボタンをクリックしたら上にスルスルッと隠れる、みたいにしました。
HTML
<div class="enterbox">
<p>当サイトは、2012年5月13日「この因縁、立ち入り禁止×３」にて発行予定の<br/>
デュラララ!!平和島静雄×折原臨也 結婚アンソロジー告知サイトです。<br/>
当企画は個人が主催するものであり、全ての企業・関係者とは一切関係ありません。
</p>
<p class="enterbutton"><span>ENTER</span></p>
</div>
<div class="main">
<!--ここから本文-->
</div>jQuery
$(function(){ $(".enterbutton").click(function () { $(".enterbox").slideUp("slow","easeInBack"); }); });
CSS
.enterbox{ height:100%; width:100%; position:fixed; top:0; bottom:0; left:0; right:0; background:#f75395; padding:20px; color:#fff; z-index:9999; }
星とか散らしてヘヴン状態っぽくする
テキストと背景イラストの間に1枚divを挟んで、手書きの星やハートをたくさん散らしました。手前のテキストとスクロールする速度を変える処理を行っているので、サイトに奥行きが出てヘヴン状態っぽい感じが出ます。
コードはほとんどここのコピーです。
jQueryで奥行きのある背景スクロールを作ってみる
HTML
<div class="star">
<div class="main">
<!--ここに本文-->
</div>
</div>jQuery
$(document).ready(function() { $(window).scroll(function(){ var y = jQuery(this).scrollTop(); $('.star').css('background-position', '50% ' + parseInt( -y / 3 ) + 'px'); }); });
CSS
.star{ background: url(../images/star.png); }
そのほか何箇所か仕込みを入れた部分があるので探してみてください。
執筆者も近日公開されるのでDRRRクラスタの方はよろしくどうぞ。