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>
次に、demo.cssとstyle.cssをリンクさせる
【 html 】
1
<head>
2
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
3
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
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>
次に、demo.cssとstyle2.cssをリンクさせる
【 html 】
1
<head>
2
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
3
<link rel=”stylesheet” type=”text/css” href=”css/style2.css” />
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>
次に、demo.cssとstyle3.cssをリンクさせる
【 html 】
1
<head>
2
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
3
<link rel=”stylesheet” type=”text/css” href=”css/style3.css” />
4
</head>
関連記事
LIGHT BOX関連の記事
PICK UP
TIPS記事セレクション