【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
関連記事他のスライドショー関連の記事
【TIPS】サムネイルプレビュー付きスライダー
サムネイルプレビュー付きスライダー【2パターン】のコードまとめ。
まず、共通の設定部分になるＣＳＳファイルをリンクさせる。
【 html 】
1
<head>
4
<noscript>
6
</noscript>
7
</head>
次に、パターンごとのhtmlとスクリプトを記述していく。
effect【 1 】 横からスライドするエフェクト
横からスライドするエフェクト
【 html 】
1
<div id="ei-slider" class="ei-slider">
2
<ul class="ei-slider-large">
3
<li>
4
<img src="images/large/1.jpg" alt="image01" />
5
<div class="ei-title">
6
<h2>Creative</h2>
7
<h3>Duet</h3>
8
</div>
9
</li>
10
<li>
11
<img src="images/large/2.jpg" alt="image02" />
12
<div class="ei-title">
13
<h2>Friendly</h2>
14
<h3>Devil</h3>
15
</div>
16
</li>
17
<li>
18
<img src="images/large/3.jpg" alt="image03"/>
19
<div class="ei-title">
20
<h2>Tranquilent</h2>
21
<h3>Compatriot</h3>
22
</div>
23
</li>
24
<li>
25
<img src="images/large/4.jpg" alt="image04"/>
26
<div class="ei-title">
27
<h2>Insecure</h2>
28
<h3>Hussler</h3>
29
</div>
30
</li>
31
<li>
32
<img src="images/large/5.jpg" alt="image05"/>
33
<div class="ei-title">
34
<h2>Loving</h2>
35
<h3>Rebel</h3>
36
</div>
37
</li>
38
<li>
39
<img src="images/large/6.jpg" alt="image06"/>
40
<div class="ei-title">
41
<h2>Passionate</h2>
42
<h3>Seeker</h3>
43
</div>
44
</li>
45
<li>
46
<img src="images/large/7.jpg" alt="image07"/>
47
<div class="ei-title">
48
<h2>Crazy</h2>
49
<h3>Friend</h3>
50
</div>
51
</li>
52
</ul><!-- ei-slider-large -->
53
<ul class="ei-slider-thumbs">
54
<li class="ei-slider-element">Current</li>
55
<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
56
<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
57
<li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
58
<li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
59
<li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
60
<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
61
<li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
62
</ul><!-- ei-slider-thumbs -->
63
</div><!-- ei-slider -->
64
65
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
66
</script>
67
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
68
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
69
<script type="text/javascript">
70
$(function() {
71
$('#ei-slider').eislideshow({
72
easing : 'easeOutExpo',
73
titleeasing : 'easeOutExpo',
74
itlespeed : 1200
75
});
76
});
77
</script>
effect【 2 】 ふわっと切り替わるエフェクトのコード
ふわっと切り替わるエフェクト
【 html 】
1
<div id="ei-slider" class="ei-slider">
2
<ul class="ei-slider-large">
3
<li>
4
<img src="images/large/6.jpg" alt="image06" />
5
<div class="ei-title">
6
<h2>Creative</h2>
7
<h3>Duet</h3>
8
</div>
9
</li>
10
<li>
11
<img src="images/large/1.jpg" alt="image01" />
12
<div class="ei-title">
13
<h2>Friendly</h2>
14
<h3>Devil</h3>
15
</div>
16
</li>
17
<li>
18
<img src="images/large/2.jpg" alt="image02"/>
19
<div class="ei-title">
20
<h2>Tranquilent</h2>
21
<h3>Compatriot</h3>
22
</div>
23
</li>
24
<li>
25
<img src="images/large/3.jpg" alt="image03"/>
26
<div class="ei-title">
27
<h2>Insecure</h2>
28
<h3>Hussler</h3>
29
</div>
30
</li>
31
<li>
32
<img src="images/large/4.jpg" alt="image04"/>
33
<div class="ei-title">
34
<h2>Loving</h2>
35
<h3>Rebel</h3>
36
</div>
37
</li>
38
<li>
39
<img src="images/large/5.jpg" alt="image05"/>
40
<div class="ei-title">
41
<h2>Passionate</h2>
42
<h3>Seeker</h3>
43
</div>
44
</li>
45
<li>
46
<img src="images/large/7.jpg" alt="image07"/>
47
<div class="ei-title">
48
<h2>Crazy</h2>
49
<h3>Friend</h3>
50
</div>
51
</li>
52
</ul><!-- ei-slider-large -->
53
<ul class="ei-slider-thumbs">
54
<li class="ei-slider-element">Current</li>
55
<li><a href="#">Slide 6</a><img src="images/thumbs/6.jpg" alt="thumb06" /></li>
56
<li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li>
57
<li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li>
58
<li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li>
59
<li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li>
60
<li><a href="#">Slide 5</a><img src="images/thumbs/5.jpg" alt="thumb05" /></li>
61
<li><a href="#">Slide 7</a><img src="images/thumbs/7.jpg" alt="thumb07" /></li>
62
</ul><!-- ei-slider-thumbs -->
63
</div><!-- ei-slider -->
64
65
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js">
66
</script>
67
<script type="text/javascript" src="js/jquery.eislideshow.js"></script>
68
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
69
<script type="text/javascript">
70
$(function() {
71
$('#ei-slider').eislideshow({
72
animation : 'center',
73
autoplay : true,
74
slideshow_interval : 3000,
75
titlesFactor : 0
76
});
77
});
78
</script>
参考サイト
http://tympanus.net/codrops/2011/11/21/elastic-image-slideshow-with-thumbnail-preview/
関連記事他のスライドショー関連の記事
【TIPS】ドロップダウンリスト ５パターン
CSS,Javascriptで作るドロップダウンリスト５パターン。
まず、ダウンロードした外部ファイルの中にある５パターン共通のCSSファイルとJSファイルを設定していく。
【 html 】
1
<head>
3
4
rel='stylesheet' type='text/css' />
5
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script>
7
</head>
次に、それぞれのhtmlとscriptを記述していく。
effect【 1 】「 gender 」
【 html 】
1
<div class="container">
2
<section class="main">
3
<div class="wrapper-demo">
4
<div id="dd" class="wrapper-dropdown-1" tabindex="1">
5
<span>Gender</span>
6
<ul class="dropdown" tabindex="1">
7
<li><a href="#">Male</a></li>
8
<li><a href="#">Female</a></li>
9
</ul>
10
</div>
11
</div>
12
</section>
13
</div>
14
15
16
<!-- jQuery if needed -->
17
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
18
1.8.2/jquery.min.js"></script>
19
<script type="text/javascript">
20
21
function DropDown(el) {
22
this.dd = el;
23
this.placeholder = this.dd.children('span');
24
this.opts = this.dd.find('ul.dropdown > li');
25
this.val = '';
26
this.index = -1;
27
this.initEvents();
28
}
29
DropDown.prototype = {
30
initEvents : function() {
31
var obj = this;
32
33
obj.dd.on('click', function(event){
34
$(this).toggleClass('active');
35
return false;
36
});
37
38
obj.opts.on('click',function(){
39
var opt = $(this);
40
obj.val = opt.text();
41
obj.index = opt.index();
42
obj.placeholder.text('Gender: ' + obj.val);
43
});
44
},
45
getValue : function() {
46
return this.val;
47
},
48
getIndex : function() {
49
return this.index;
50
}
51
}
52
$(function() {
53
54
var dd = new DropDown( $('#dd') );
55
56
$(document).click(function() {
57
// all dropdowns
58
$('.wrapper-dropdown-1').removeClass('active');
59
});
60
61
});
62
63
</script>
64
65
effect【 2 】「 sign in with 」
【 html 】
1
<div class="container">
2
<section class="main">
3
<div class="wrapper-demo">
4
<div id="dd" class="wrapper-dropdown-2" tabindex="1">Sign in with
5
<ul class="dropdown">
9
</ul>
10
</div>
11
</div>
12
</section>
13
</div>
14
15
16
<!-- jQuery if needed -->
17
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
19
<script type="text/javascript">
20
21
function DropDown(el) {
22
this.dd = el;
23
this.initEvents();
24
}
25
DropDown.prototype = {
26
initEvents : function() {
27
var obj = this;
28
29
obj.dd.on('click', function(event){
30
$(this).toggleClass('active');
31
event.stopPropagation();
32
});
33
}
34
}
35
36
$(function() {
37
var dd = new DropDown( $('#dd') );
38
$(document).click(function() {
39
// all dropdowns
40
$('.wrapper-dropdown-2').removeClass('active');
41
});
42
43
});
44
45
</script>
46
47
effect【 3 】「 transport 」
【 html 】
1
<div class="container">
2
<section class="main">
3
<div class="wrapper-demo">
4
<div id="dd" class="wrapper-dropdown-3" tabindex="1">
5
<span>Transport</span>
6
<ul class="dropdown">
7
<li><a href="#"><i class="icon-envelope icon-large"></i>Classic mail</a></li>
8
<li><a href="#"><i class="icon-truck icon-large"></i>UPS Delivery</a></li>
9
<li><a href="#"><i class="icon-plane icon-large"></i>Private jet</a></li>
10
</ul>
11
</div>
12
</div>
13
</section>
14
</div>
15
16
17
<!-- jQuery if needed -->
18
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
20
<script type="text/javascript">
21
22
function DropDown(el) {
23
this.dd = el;
24
this.placeholder = this.dd.children('span');
25
this.opts = this.dd.find('ul.dropdown > li');
26
this.val = '';
27
this.index = -1;
28
this.initEvents();
29
}
30
DropDown.prototype = {
31
initEvents : function() {
32
var obj = this;
33
34
obj.dd.on('click', function(event){
35
$(this).toggleClass('active');
36
return false;
37
});
38
39
obj.opts.on('click',function(){
40
var opt = $(this);
41
obj.val = opt.text();
42
obj.index = opt.index();
43
obj.placeholder.text(obj.val);
44
});
45
},
46
getValue : function() {
47
return this.val;
48
},
49
getIndex : function() {
50
return this.index;
51
}
52
}
53
54
$(function() {
55
var dd = new DropDown( $('#dd') );
56
57
$(document).click(function() {
58
// all dropdowns
59
$('.wrapper-dropdown-3').removeClass('active');
60
});
61
62
});
63
64
</script>
65
66
67
effect【 4 】「 To do 」
【 html 】
1
<div class="container">
2
<section class="main">
3
<div class="wrapper-demo">
4
<div id="dd" class="wrapper-dropdown-4">To do
5
<ul class="dropdown">
7
<label for="el-1">Eat a donut</label></li>
8
<li><input type="checkbox" id="el-2" name="el-2" value="neighbour">
9
<label for="el-2">Spy on my neighbours</label></li>
11
<label for="el-3">Feed my T-rex</label></li>
12
</ul>
13
</div>
14
</div>
15
</section>
16
</div>
17
18
19
<!-- jQuery if needed -->
20
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
22
<script type="text/javascript">
23
24
function DropDown(el) {
25
this.dd = el;
26
this.opts = this.dd.find('ul.dropdown > li');
27
this.val = ;
28
this.index = ;
29
this.initEvents();
30
}
31
DropDown.prototype = {
32
initEvents : function() {
33
var obj = this;
34
35
obj.dd.on('click', function(event){
36
$(this).toggleClass('active');
37
event.stopPropagation();
38
});
39
40
obj.opts.children('label').on('click',function(event){
41
var opt = $(this).parent(),
42
chbox = opt.children('input'),
43
val = chbox.val(),
44
idx = opt.index();
45
46
($.inArray(val, obj.val) !== -1) ? obj.val.splice( $.inArray(val, obj.val), 1 )
47
: obj.val.push( val );
48
($.inArray(idx, obj.index) !== -1) ? obj.index.splice( $.inArray(idx, obj.index)
49
, 1 ) : obj.index.push( idx );
50
});
51
},
52
getValue : function() {
53
return this.val;
54
},
55
getIndex : function() {
56
return this.index;
57
}
58
}
59
60
$(function() {
61
62
var dd = new DropDown( $('#dd') );
63
$(document).click(function() {
64
// all dropdowns
65
$('.wrapper-dropdown-4').removeClass('active');
66
});
67
});
68
</script>
effect【 5 】「 john Doe 」
【 html 】
1
<div class="container">
2
<section class="main">
3
<div class="wrapper-demo">
4
<div id="dd" class="wrapper-dropdown-5" tabindex="1">John Doe
5
<ul class="dropdown">
6
<li><a href="#"><i class="icon-user"></i>Profile</a></li>
7
<li><a href="#"><i class="icon-cog"></i>Settings</a></li>
8
<li><a href="#"><i class="icon-remove"></i>Log out</a></li>
9
</ul>
10
</div>
11
</div>
12
</section>
13
</div>
14
15
16
<!-- jQuery if needed -->
17
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
19
<script type="text/javascript">
20
21
function DropDown(el) {
22
this.dd = el;
23
this.initEvents();
24
}
25
DropDown.prototype = {
26
initEvents : function() {
27
var obj = this;
28
29
obj.dd.on('click', function(event){
30
$(this).toggleClass('active');
31
event.stopPropagation();
32
});
33
}
34
}
35
36
$(function() {
37
38
var dd = new DropDown( $('#dd') );
39
40
$(document).click(function() {
41
// all dropdowns
42
$('.wrapper-dropdown-5').removeClass('active');
43
});
44
45
});
46
47
</script>
48
49
参考サイトhttp://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
関連記事ドロップダウンメニュー関連の記事
画像を４つのパネルに分割＆エフェクト効果のスライドショー -Four Boxes Slideshow-
画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。
まず、ダウンロードした外部ファイルの中にある３パターン共通のＣＳＳファイル(３ファイル)とｊｓファイル(３ファイル)を設定。
【 html 】
1
<head>
5
<script src="js/modernizr.custom.js"></script>
6
<script src="js/classie.js"></script>
7
<script src="js/boxesFx.js"></script>
8
<script>
9
new BoxesFx( document.getElementById( 'boxgallery' ) );
10
</script>
11
</head>
次に、それぞれのhtmlを記述していく。
effect【 1 】 各パネルが別々のスライドをするエフェクト
各パネルが別々のスライドをするエフェクトのコード。
【 html 】
1
<div id="boxgallery" class="boxgallery" data-effect="effect-1">
2
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
3
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
4
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
5
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
6
</div>
effect【 2 】 各パネルが外側 側面に向かって時間差でスライド
各パネルが外側 側面に向かって時間差でスライドするコード
【 html 】
1
<div id="boxgallery" class="boxgallery" data-effect="effect-2">
2
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
3
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
4
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
5
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
6
</div>
effect【 3 】 各パネルが時間差でスライドしながら落ちる
各パネルが時間差でスライドしながら落ちるコード
【 html 】
1
<div id="boxgallery" class="boxgallery" data-effect="effect-3">
2
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
3
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
4
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
5
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
6
</div>
参考サイト
http://tympanus.net/codrops/2014/06/11/how-to-create-a-tiled-background-slideshow/
関連記事他のスライドショー関連の記事
【TIPS】サムネイルプレビュー付きスライダー【 Sweet Thumbnails Preview Gallery 】
サムネイルプレビュー付きスライダー。
記述の流れは、まず対象とする＜img＞タグにhtmlタグを追加して、以下のサイトから外部ファイルをダウンロードする。
外部ファイルの中からCSS、Javascript、JQueryのそれぞれのコードを設定していくという流れ。
サムネイルプレビュー付きスライダーの設定
1. 対象とする＜img＞タグにhtmlタグを追加
まずは対象とする＜img＞タグにhtmlタグを追加していく。
【 html 】
1
<div id="ps_container" class="ps_container">
2
<div class="ps_image_wrapper">
3
<!-- First initial image -->
4
<img src="images/11.jpg" alt="" />
5
</div>
6
<!-- Navigation items -->
7
<div class="ps_next"></div>
8
<div class="ps_prev"></div>
9
<!-- Dot list with thumbnail preview -->
10
<ul class="ps_nav">
11
<li class="selected"><a href="images/11.jpg" rel="images/thumbs/11.jpg">img</a></li>
12
<li><a href="images/12.jpg" rel="images/thumbs/12.jpg">img</a></li>
13
<li><a href="images/13.jpg" rel="images/thumbs/13.jpg">img</a></li>
14
<li><a href="images/14.jpg" rel="images/thumbs/14.jpg">img</a></li>
15
<li><a href="images/15.jpg" rel="images/thumbs/15.jpg">img</a></li>
16
<li><a href="images/16.jpg" rel="images/thumbs/16.jpg">img</a></li>
17
<li><a href="images/17.jpg" rel="images/thumbs/17.jpg">img</a></li>
18
<li><a href="images/18.jpg" rel="images/thumbs/18.jpg">img</a></li>
19
<li><a href="images/19.jpg" rel="images/thumbs/19.jpg">img</a></li>
20
<li><a href="images/20.jpg" rel="images/thumbs/20.jpg">img</a></li>
21
<li class="ps_preview">
22
<div class="ps_preview_wrapper">
23
<!-- Thumbnail comes here -->
24
</div>
25
<!-- Little triangle -->
26
<span></span>
27
</li>
28
</ul>
29
</div>
2. head内にダウンロードしたCSSファイルをリンクさせる
3. JavascriptとJQueryのコードを記述
【 html 】
1
<!-- The JavaScript -->
2
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
3
<script type="text/javascript">
4
～ここのエリアに記述するスクリプトのコードはコピペなので省略～
5
</script>
6
<script type="text/javascript">
7
～ここのエリアに記述するスクリプトのコードはコピペなので省略～
8
</script>
関連記事他のスライドショー関連の記事
