【TIPS｜ズームスライダー】高速スライド&ズーム表示の画面遷移がインパクト大！
アニメーションしながらスライダー&ズーム表示する「ズームスライダー」。
「ズームスライダー」の設置手順
htmlファイル内にCSSファイルとJSファイルをリンクさせる
まず、以下のサイトから外部ファイルをダウンロードする。
元サイト
ダウンロードした外部ファイルから、「style.css」「demo.css」「component.css」の３つのCSSファイルとmodernizr.custom.jsをリンクさせる。
【 html 】
1
<head>
2
<!-- Feather Icons -->
4
<!-- General demo styles & header -->
6
<!-- Component styles -->
8
<script src="js/modernizr.custom.js"></script>
9
</head>
スライダー遷移のフロント画面エリアの構造タグ
次に、スライダーさせる対象となる画像にhtmlタグを追加していく
(※画像２枚分のコード)
【 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">
11
<div class="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">
24
<div class="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-->
各画像の詳細ページエリアの構造タグ
次に、画像のクリック先の詳細ページエリアを作っていく
(※画像２枚分のコード)
【 html 】
1
<!--▼各画像の詳細ページエリア▼-->
2
<section class="content">
3
<div class="content__item" id="content-1">
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
関連記事他のスライドショー関連の記事
