アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。
「ズームスライダー」の設置手順
htmlファイル内にCSSファイルとJSファイルをリンクさせる
まず、以下のサイトから外部ファイルをダウンロードする。
元サイト
ダウンロードした外部ファイルから、「style.css」「demo.css」「component.css」の3つのCSSファイルとmodernizr.custom.jsをリンクさせる。
【 html 】
1
<head>
2
<!– Feather Icons –>
3
<link rel=”stylesheet” type=”text/css” href=”fonts/feather/style.css”>
4
<!– General demo styles & header –>
5
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
6
<!– Component styles –>
7
<link rel=”stylesheet” type=”text/css” href=”css/component.css” />
8
<script src=”js/modernizr.custom.js”></script>
9
</head>
スライダー遷移のフロント画面エリアの構造タグ
次に、スライダーさせる対象となる画像にhtmlタグを追加していく(※画像2枚分のコード)
【 html 】
1
<header class=”bp-header cf”>
2
<h1>Zoom Slider</h1>
3
</header>
4
5
<!– Grid(▼スライダー遷移のフロント画面エリア▼) –>
6
<section class=”slider”>
7
<div class=”slide slide–current” data-content=”content-1″>
8
<div class=”slide__mover”>
9
<div class=”zoomer flex-center”>
10
<img class=”zoomer__image” src=”images/iphone.png” alt=”iPhone” />
11
<div class=”preview”>
12
<img src=”images/iphone-content-preview.png” alt=”iPhone app preview” />
13
<div class=”zoomer__area zoomer__area–size-2″></div>
14
</div>
15
</div>
16
</div>
17
<h2 class=”slide__title”><span>The Classy</span> iPhone 6</h2>
18
</div>
19
20
<div class=”slide” data-content=”content-2″>
21
<div class=”slide__mover”>
22
<div class=”zoomer flex-center”>
23
<img class=”zoomer__image” src=”images/ipad.png” alt=”iPad Mini” />
24
<div class=”preview”>
25
<img src=”images/ipad-content-preview.png” alt=”iPad Mini app preview” />
26
<div class=”zoomer__area zoomer__area–size-4″></div>
27
</div>
28
</div>
29
</div>
30
<h2 class=”slide__title”><span>The Fantastic</span> iPad Mini</h2>
31
</div>
32
33
<nav class=”slider__nav”>
34
<button class=”button button–nav-prev”><i class=”icon icon–arrow-left”></i>
35
<span class=”text-hidden”>Previous product</span></button>
36
<button class=”button button–zoom”><i class=”icon icon–zoom”></i>
37
<span class=”text-hidden”>View details</span></button>
38
<button class=”button button–nav-next”><i class=”icon icon–arrow-right”></i>
39
<span class=”text-hidden”>Next product</span></button>
40
</nav>
41
</section>
42
<!– /slider–>
各画像の詳細ページエリアの構造タグ
次に、画像のクリック先の詳細ページエリアを作っていく(※画像2枚分のコード)
【 html 】
1
<!–▼各画像の詳細ページエリア▼–>
2
<section class=”content”>
3
<div class=”content__item” id=”content-1″>
4
<img class=”content__item-img rounded-right” src=”images/iphone-content.png”
5
alt=”Apple Watch Content” />
6
<div class=”content__item-inner”>
7
<h2>The iPhone 6</h2>
8
<h3>Incredible performance for powerful apps</h3>
9
<p>コメント</p>
10
</div>
11
</div>
12
13
<div class=”content__item” id=”content-2″>
14
<img class=”content__item-img rounded-right” src=”images/ipad-content.jpg”
15
alt=”iPad Mini Content” />
16
<div class=”content__item-inner”>
17
<h2>The iPad Mini</h2>
18
<h3>Desktop-class architecture without a desktop</h3>
19
<p>コメント</p>
20
</div>
21
</div>
22
<button class=”button button–close”><i class=”icon icon–circle-cross”></i>
23
<span class=”text-hidden”>Close content</span></button>
24
</section>
25
</div><!–containerおわり–>
26
27
<script src=”js/classie.js”></script>
28
<script src=”js/dynamics.min.js”></script>
29
<script src=”js/main.js”></script>
30
関連記事
他のスライドショー関連の記事
PICK UP
注目記事セレクション