このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.09.07

CSS3 ライトボックス風 アニメーション

CSS3では、transitionプロパティanimation-namekeyframesを呼びだして
アニメーションを作成することができます。

それらを使用し、「ライトボックス風 アニメーション」を作りたいと思います。

(少々強引な方法ではありますが。。。)

safariやchoromeのwebkitブラウザのみ対応として作成していきます。

デモページ

http://webcyou.com/demo/css3/lightbox.html

 

では、まずHTMLを記述していきます。

キーとなる要素は2つ

HTML

[code]<body id="body">
<a href="lightbox.html" class="light"></a>
<a href="#body"><img src="hoge.jpg" alt="" /></a>
</body>
[/code]

bodyにidを付与しましょう。id名はなんでも良いです。

body直下にa要素を配置します。リンク先は現在のURL(ファイル)にします。

また、クラス(idでも可)を付与。こちらも名前は何でも良いです。

そして、拡大させたい画像を配置し、その画像をa要素で括ります。

リンク先はbodyに付与したid名に。

 

では、画像の用意を。

画像をクリックしたときに拡大表示させたいサイズで用意いたします。

その画像をcssで縮小。

画像がクリックされたときの背景を黒の透過になるように設定します。

 

body,htmlにmin-height,heightそれぞれ100%指定。

body直下のa要素class="light"を

display:none;で非表示。

width,heightを100%

backgroundを以下の数値に。

CSS

[code]body,html{
min-height:100%;
height:100%;
}
.light{
display:none;
width:100%;
height:100%;
background:rgba(0,0,0,0.85);
}[/code]

画像がクリックされたときの処理を疑似クラス:targetを使って処理の設定を行います。

まずは背景の設定から

CSS

[code]
#body:target .light {
position: absolute;
display: block;
-webkit-animation-name: 'lightIn';
-webkit-animation-duration: 0.25s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: 1;
}
[/code]

-webkit-animation-name: 'lightIn';でアニメーションを実行させます。

その他の設定は
-webkit-animation-duration:時間
-webkit-animation-timing-function: アニメーションのタイミング
-webkit-animation-iteration-count: 繰り返し回数

となってます。

白から黒へとなるようにアニメーション処理を記述。

CSS

[code]@-webkit-keyframes 'lightIn' {
0% {
background: rgba(255, 255, 255, 0); }
100% {
background: rgba(0, 0, 0, 0.85); }
}[/code]

最後に画像の処理

通常は250pxで配置。

CSS

[code]img{width:250px;}[/code]

クリックされた時の処理。

CSS

[code]
#body:target img {
position:absolute;
top: 50%;
left: 50%;
width:auto;
margin:-200px 0 0 -225px;
-webkit-animation-name: 'zoomIn';
-webkit-animation-duration: 0.6s;
-webkit-animation-timing-function: ease-out;
-webkit-animation-iteration-count: 1;
}
[/code]

ウィンドウ全体の真ん中に表示される様に記述。

position:absolute;で50%とネガティブmargin
margin:-200px 0 0 -225px;で真ん中へ。

ネガティブmarginは画像(書き出し)サイズの半分に設定。

-webkit-animation-name: 'zoomIn';〜以下はアニメーションの呼び出しと設定。

CSS

[code]
@-webkit-keyframes 'zoomIn' {
0% {
width: 300px;
}
100% {
width: 450px;
}
}
[/code]

単純に100%に書き出したサイズに設定。

完成!

デモページ

http://webcyou.com/demo/css3/lightbox.html

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。