Day: March 7, 2012

ここ数年、ネット上でシングルページWEBサイトを目にする機会がグンと増えてきましたね。その殆どがトランジッション効果にJavaScriptを使用しています。さて今回はそんなマジックを「CSS Transition」と「:target」プロパティで実現する方法をご紹介したいと思います。 デモで使用しているdribbbleのshotはMatt Kaufenbergさんによるものです。ご興味あればDribbbleのプロフィールやブログも覗いてみてくださいね。 この記事は、http://tympanus.net/codrops/の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ HTMLは５つのパートから成り立っていて、ヘッダーと４つのコンテンツが入るセクションに分けることが出来ます。それぞれのコンテンツセクションには独自のIDと「panel」と言うクラス名を割り当て、更にその中に入れ子で「content」クラスを割り当てたDIVタグを記述しています。「home」IDを持った１つ目のコンテンツセクションは他のものと違い入れ子のDIVタグは入れず、クラス名も「content」を使用しています。 ヘッダー部分にはメインとなるH1タグとナビゲーションメニューを入れます。 どうしてわざわざ最後にヘッダーを追加してULリスト使用しているかと言うと、間接セレクタ（general sibling selector）を使ってちょっと遊びたかったからです。こうすれば、それぞれのアイテムの色を変えたり出来ますよね。 さて、今回のメインの目的はそれぞれのセクションにトランジッションを追加する為に「:target」疑似要素を使用することです。今回のデモではセクションを上下に移動させています。 CSSスタイリング まずはヘッダーとナビゲーション部分にスタイリングを施します。ここのセクションは、他の部位と違って移動したりせず、ずっと同じスポットに留まらせます。 「home」IDを持ったセクション以外は全て「panel」クラスを持っていましたよね。その「panel」クラスを持った要素がターゲット（:target）になる度に、トランジッション効果が発動されるようにします。タネ明かしをしてしまうと、クラスがノーマル状態の時はマージンをマイナスの値でセットして、「:target」の疑似要素ではマージンを全て０％に設定しているだけのことです。トランジッションを追加したことにより、選択されたセクションは上方向からスライドインしてくるようになります。 今度は全セクション共通で設定してある「content」クラスのスタイリングに移りましょう。 ナビゲーション内で選択されているメニューの色を変更する為には該当アイテムをゲットする必要があり、ここで「:target」疑似要素を間接セレクタ（general sibling selector）と併せて使用しています。 もうこれで完成です！デモも見て、他にも何か工夫出来るか試してみてくださいね。