前回の「CSS3 の target 疑似クラスで脚注を動的に表示する」に引き続き、:target 疑似クラスを使ってスライドショーみたいなんを作ってみた。ひとつの HTML 文書なんだけど、画面が切り替わっていくかのように見せる。ピュア CSS とか言いつつも、前回同様、:target 疑似クラスに未対応な IE でも動くように JavaScript を使っている。純粋に CSS のみで動くのは、Firefox、Safari あたり。Opera は動かない。
<div id="section-01" class="section"> <!-- 1ページ目 -->
…
</div>
<div id="section-02" class="section"> <!-- 2ページ目 -->
…
</div>
<div id="section-03" class="section"> <!-- 3ページ目 -->
…
</div>div.section 単位でひとつのスライドとして、それに対して :target 疑似クラスを使って、表示・非表示をコントロール。ターゲットされた div.section はブロック化され、z-index によって前面のレイヤーに配置される。
div.section {
display: none;
}
div.sftarget, /* for IE */
div:target {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: #fff;
}即席で作ったんで構造的に再考する必要がありそうだけど、作り込めばそれなりに使えそうなものになるかも。tabindex や accesskey あたりをうまく使えば、キーボード操作だけでページ遷移できるかな。
Comments
うわあ。これおもしろいですね。
前回の :target に関する記事も面白かったですが、ここまで思いつくなんてさすがですね。
ありがとうございます :-)
ギミック厨なもんで、動的な疑似クラスとか好きなんですよね。
あまり無茶をしない範囲で、面白いことが出来ればなぁと色々考えてます。
すすすすごいですよ！
最近すごいを連発しすぎなので僕もなにかすごい事やりたいなと思います。
FirefoxとSafariで動けば僕的にはおもっきしピュアだと考えてたりします。
でしょ？ピュアでしょ？自分でも、うぉっ！とか思いながら作ってました ;-P
まあ、素直に S5 使えばって話もありますが。
suk さんのすごい事、期待してます！