ここ数年、ネット上でシングルページWEBサイトを目にする機会がグンと増えてきましたね。その殆どがトランジッション効果にJavaScriptを使用しています。さて今回はそんなマジックを「CSS Transition」と「:target」プロパティで実現する方法をご紹介したいと思います。
デモで使用しているdribbbleのshotはMatt Kaufenbergさんによるものです。ご興味あればDribbbleのプロフィールやブログも覗いてみてくださいね。
この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。
HTMLマークアップ
HTMLは５つのパートから成り立っていて、ヘッダーと４つのコンテンツが入るセクションに分けることが出来ます。それぞれのコンテンツセクションには独自のIDと「panel」と言うクラス名を割り当て、更にその中に入れ子で「content」クラスを割り当てたDIVタグを記述しています。「home」IDを持った１つ目のコンテンツセクションは他のものと違い入れ子のDIVタグは入れず、クラス名も「content」を使用しています。
<!-- Home -->
<div id="home" class="content">
<h2>Home</h2>
<p>Some content</p>
<!-- ... -->
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel">
<div class="content">
<h2>Portfolio</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel">
<div class="content">
<h2>About</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel">
<div class="content">
<h2>Contact</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /Contact -->
ヘッダー部分にはメインとなるH1タグとナビゲーションメニューを入れます。
<!-- Header with Navigation -->
<div id="header">
<h1>Page Transitions with CSS3</h1>
<ul id="navigation">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
<li><a id="link-about" href="#about">About Me</a></li>
<li><a id="link-contact" href="#contact">Contact</a></li>
</ul>
</div>
どうしてわざわざ最後にヘッダーを追加してULリスト使用しているかと言うと、間接セレクタ（general sibling selector）を使ってちょっと遊びたかったからです。こうすれば、それぞれのアイテムの色を変えたり出来ますよね。
さて、今回のメインの目的はそれぞれのセクションにトランジッションを追加する為に「:target」疑似要素を使用することです。今回のデモではセクションを上下に移動させています。
CSSスタイリング
まずはヘッダーとナビゲーション部分にスタイリングを施します。ここのセクションは、他の部位と違って移動したりせず、ずっと同じスポットに留まらせます。
#header{
position: absolute;
z-index: 2000;
width: 235px;
top: 50px;
}
#header h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}
#navigation {
margin-top: 20px;
width: 235px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 14px;
}
#navigation a:hover {
background: #ddd;
}
「home」IDを持ったセクション以外は全て「panel」クラスを持っていましたよね。その「panel」クラスを持った要素がターゲット（:target）になる度に、トランジッション効果が発動されるようにします。タネ明かしをしてしまうと、クラスがノーマル状態の時はマージンをマイナスの値でセットして、「:target」の疑似要素ではマージンを全て０％に設定しているだけのことです。トランジッションを追加したことにより、選択されたセクションは上方向からスライドインしてくるようになります。
.panel{
min-width: 100%;
height: 98%;
overflow-y: auto;
overflow-x: hidden;
margin-top: -150%;
position: absolute;
background: #000;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
z-index: 2;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.panel:target{
margin-top: 0%;
background-color: #ffcb00;
}
今度は全セクション共通で設定してある「content」クラスのスタイリングに移りましょう。
.content{
right: 40px;
left: 280px;
top: 0px;
position: absolute;
padding-bottom: 30px;
}
.content h2{
font-size: 110px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 18px;
padding: 10px;
line-height: 24px;
color: #fff;
display: inline-block;
background: black;
padding: 10px;
margin: 3px 0px;
}
ナビゲーション内で選択されているメニューの色を変更する為には該当アイテムをゲットする必要があり、ここで「:target」疑似要素を間接セレクタ（general sibling selector）と併せて使用しています。
#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
background: #000;
color: #fff;
}
もうこれで完成です！デモも見て、他にも何か工夫出来るか試してみてくださいね。
