[CSS]1ページで構成されたウェブサイトで使える、かっこいいCSS3アニメーションのテクニック
CSS3アニメーションを使って、ダイナミックなスライドやフェードのアニメーションでページ（コンテンツ）を切り替えるテクニックを3つ紹介します。 Demo 3 Demo 3は左からスライドのアニメーションで切り替わります。 実装 デモは一見、Homeを含む4ページで構成されているように見えますが、1ページで作成されています。 HTML HTMLはdiv要素で配置したコンテンツが4つ、ナビゲーションが1つの構成です。 コンテンツはそれぞれ異なるidとclassを付与します。 <!-- Home --> <div id="home" class="content"> <h2>Home</h2> <p>Some content</p> <!-- ... --> </div> <!-- /Home --> <!-- Portfolio --> <div id="portfolio" class="p
これはちょっと使いたくなる、キーフレームを使ったCSS3アニメーションのナビゲーション | コリス
Flashも無し、jQueryも無し、キーフレームを使ったCSS3アニメーションで実装したかっこいいドロップダウン型のナビゲーションを紹介します。 Two Level Superfishy Menu [ad#ad-2] デモ 実装 デモ デモはキーフレームのアニメーションを使用しているため、Chrome, Safari,Firefoxでご覧ください。 ※IE, Operaでは動作しません。 デモページ: アニメーション完了時 実装 HTML ナビゲーションはリスト要素で実装されており、第二レベルはリストの入れ子になっています。 <div id="container"> <ul id="nav"> <li><a href="#">Home</a></li> <li> <a href="#">About Us</a> <ul> <li><a href="#">What we do</a></l
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
