【TIPS】CSSだけで実装できる!! エレガンチックな「LIGHT BOX」
CSSだけで表現できるエレガンチックな「LIGHT BOX」3パターン。
記述の手順は、以下のサイトからソースをダウンロードし、対象とする画像の<img>タグにコードをつけて、あとはパターンごとの個別のCSSをリンクさせるという流れ。
http://tympanus.net/codrops/2011/12/26/css3-lightbox/
パターン【 1 】 scale-up / fade-in animation
縮小サイズの状態からフェードインするアニメーション
まずはhtmlファイルに以下のコードを記述(※画像2枚分のコード) 【 html 】
1
<section>
2
<ul class="lb-album">
3
<li>
4
<a href="#image-1">
5
<img src="images/thumbs/12.jpg" alt="image01">
6
<span>鯛の姿造り</span>
7
</a>
8
<div class="lb-overlay" id="image-1">
9
<img src="images/full/12.jpg" alt="image01" />
10
<div>
11
<h3>鯛の姿造り <span>/タイノスガタヅクリ/</h3>
12
<p></p>
13
</div>
14
<a href="#page" class="lb-close">x Close</a>
15
</div>
16
</li>
17
18
<li>
19
<a href="#image-2">
20
<img src="images/thumbs/17.jpg" alt="image02">
21
<span>甘エビの握り</span>
22
</a>
23
<div class="lb-overlay" id="image-2">
24
<img src="images/full/17.jpg" alt="image02" />
25
<div>
26
<h3>甘エビの握り <span>/アマエビノニギリ/</h3>
27
<p></p>
28
</div>
29
<a href="#page" class="lb-close">x Close</a>
30
</div>
31
</li>
32
</ul>
33
</section>
【 html 】
1
<head>
4
</head>
パターン【 2 】 scale-down / fade-in animation
拡大サイズの状態からフェードインするアニメーション
まずはhtmlファイルに以下のコードを記述(※画像2枚分のコード) 【 html 】
1
<section>
2
<ul class="lb-album">
3
<li>
4
<a href="#image-1">
5
<img src="images/thumbs/13.jpg" alt="image01">
6
<span>日本の風景-5</span>
7
</a>
8
<div class="lb-overlay" id="image-1">
9
<img src="images/full/13.jpg" alt="image01" />
10
<div>
11
<h3>日本の風景-5 <span>/japanese scene/</h3>
12
<p></p>
13
</div>
14
<a href="#page" class="lb-close">x Close</a>
15
</div>
16
</li>
17
18
<li>
19
<a href="#image-2">
20
<img src="images/thumbs/15.jpg" alt="image02">
21
<span>日本の風景-4</span>
22
</a>
23
<div class="lb-overlay" id="image-2">
24
<img src="images/full/15.jpg" alt="image02" />
25
<div>
26
<h3>日本の風景-4 <span>/japanese scene/</h3>
27
<p></p>
28
</div>
29
<a href="#page" class="lb-close">x Close</a>
30
</div>
31
</li>
32
</ul>
33
</section>
【 html 】
1
<head>
4
</head>
パターン【 3 】 Fade-in & navigation
フェードイン+ナビゲーション
まずはhtmlファイルに以下のコードを記述(※画像2枚分のコード) 【 html 】
1
<section>
2
<ul class="lb-album">
3
<li>
4
<a href="#image-1">
5
<img src="images/thumbs/1.jpg" alt="image01">
6
<span>Pointe</span>
7
</a>
8
<div class="lb-overlay" id="image-1">
9
<img src="images/full/1.jpg" alt="image01" />
10
<div>
11
<h3>pointe <span>/point/</h3>
12
<p>Dance performed on the tips of the toes</p>
13
<a href="#image-10" class="lb-prev">Prev</a>
14
<a href="#image-2" class="lb-next">Next</a>
15
</div>
16
<a href="#page" class="lb-close">x Close</a>
17
</div>
18
</li>
19
20
<li>
21
<a href="#image-2">
22
<img src="images/thumbs/2.jpg" alt="image02">
23
<span>Port de bras</span>
24
</a>
25
<div class="lb-overlay" id="image-2">
26
<img src="images/full/2.jpg" alt="image02" />
27
<div>
28
<h3>port de bras <span>/ˌpôr də ˈbrä/</h3>
29
<p>An exercise designed to develop graceful movement and disposition of the arms</p>
30
<a href="#image-1" class="lb-prev">Prev</a>
31
<a href="#image-3" class="lb-next">Next</a>
32
</div>
33
<a href="#page" class="lb-close">x Close</a>
34
</div>
35
</li>
36
</ul>
37
</section>
【 html 】
1
<head>
4
</head>
関連記事LIGHT BOX関連の記事