Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。 CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheetのデモ CSS3 Animation Cheat Sheetの使い方 CSS3 Animation Cheat Sheetのデモ デモは2種類あります。 CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。 まずは、
パネルをホバーすると、表と裏がくるっとアニメーションで変わるスタイルシートを紹介します。 くるっとなるのは水平だけでなく、垂直にも対応しています。 上：垂直くるっ、下：水平くるっ CSS Flip Boardsの実装 くるっとなるのはスタイルシートのエフェクトで、スクリプトは使用されていません。 Step 1: HTML 表・裏のパネル2枚をそれぞれdiv要素にし、それらを2つのdivで内包します。 垂直にはtop、水平にはleftを指定します。 垂直にくるっ <div class="flip-boards"> <div class="board top"> <div class="front"><h2>パネル：表</h2></div> <div class="flipped"><h2>パネル：裏</h2></div> </div> </div> 水平にくるっ <div class="fl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
