【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】画像ホバーの際アニメーション効果をつけるCSS3
スクリプト不要で、画像ホバー時にCSS3アニメーションで様々なキャプション表示ができるスタイルシート10パターンのまとめ。
記述はまず、どのパターンでも共通に適用させるCSSを設定して ( ダウンロードした外部ファイルをリンクさせる ) 、あとはパターンごとに異なる個別のhtmlを書いていくという流れ。
目 次
- ・head内に共通のCSSを設定
- ・hover effect【1】上下からテキストがスライドしてくるエフェクト
- ・hover effect【2】四方八方から時間差でフィルタとテキストをスライドしながら表示
- ・hover effect【3】四方八方から時間差でフィルタとテキストを表示
- ・hover effect【4】回転しながら画像とテキストが入れ替わる
- ・hover effect【5】テキストとフィルターが左からスライドして画像を押し出すエフェクト
- ・hover effect【6】テキストをズームアップ表示からの配置
- ・hover effect【7】画像を回転させながら消して、テキストをスライド表示
- ・hover effect【8】上からスライドしてきたフィルターとテキストがバウンドするエフェクト
- ・hover effect【9】両サイドからフィルターがスライド＋ひねりを加えたテキスト表示
- ・hover effect【10】画像ズームアップ表示してからのテキスト表示にフワッと切り替え
head内に共通のCSSを設定
まずは、全てのパターン共通になるCSSファイルをhead内にを設定する。
【 html 】
1
<head>
6
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
7
</head>
あとは、設定したいパターンのコードをhtmlに書いていく。
hover effect【１】
上下からテキストがスライドしてくるエフェクト
上下からテキストがスライドしてくるエフェクト
上下からテキストがスライドしてくるエフェクト
【 html 】
1
<div class="main">
2
<div class="view view-first">
3
<img src="images/1.jpg" />
4
<div class="mask">
5
<h2>Hover Style #1</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-first">
13
<img src="images/4.jpg" />
14
<div class="mask">
15
<h2>Hover Style #1</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
hover effect【２】
四方八方から時間差でフィルタとテキストをスライドしながら表示
四方八方から時間差でフィルタとテキストをスライドしながら表示
四方八方から時間差でフィルタとテキストをスライドしながら表示
【 html 】
1
<div class="main">
2
<div class="view view-second">
3
<img src="images/5.jpg" />
4
<div class="mask"></div>
5
<div class="content">
6
<h2>Hover Style #2</h2>
7
<p>A wonderful serenity has taken possession of my entire soul,
8
like these sweet mornings of spring which I enjoy with my whole heart.</p>
9
<a href="#" class="info">Read More</a>
10
</div>
11
</div>
12
13
<div class="view view-second">
14
<img src="images/6.jpg" />
15
<div class="mask"></div>
16
<div class="content">
17
<h2>Hover Style #2</h2>
18
<p>A wonderful serenity has taken possession of my entire soul,
19
like these sweet mornings of spring which I enjoy with my whole heart.</p>
20
<a href="#" class="info">Read More</a>
21
</div>
22
</div>
23
</div>
hover effect【３】
四方八方から時間差でフィルタとテキストを表示
四方八方から時間差でフィルタとテキストを表示
四方八方から時間差でフィルタとテキストを表示(かぶさる効果がかかったエフェクト)
【 html 】
1
<div class="main">
2
<div class="view view-third">
3
<img src="images/10.jpg" />
4
<div class="mask">
5
<h2>Hover Style #3</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-third">
13
<img src="images/12.jpg" />
14
<div class="mask">
15
<h2>Hover Style #3</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
hover effect【４】
回転しながら画像とテキストが入れ替わる
回転しながら画像とテキストが入れ替わる
回転しながら画像とテキストが入れ替わる
【 html 】
1
<div class="main">
2
<div class="view view-fourth">
3
<img src="images/14.jpg" />
4
<div class="mask">
5
<h2>Hover Style #4</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-fourth">
13
<img src="images/16.jpg" />
14
<div class="mask">
15
<h2>Hover Style #4</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
hover effect【５】
テキストとフィルターが左からスライドして画像を押し出すエフェクト
テキストとフィルターが左からスライドして画像を押し出すエフェクト
テキストとフィルターが左からスライドして画像を押し出すエフェクト
【 html 】
1
<div class="main">
2
<div class="view view-fifth">
3
<img src="images/1.jpg" />
4
<div class="mask">
5
<h2>Hover Style #5</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-fifth">
13
<img src="images/2.jpg" />
14
<div class="mask">
15
<h2>Hover Style #5</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
hover effect【６】
テキストをズームアップ表示からの配置
テキストをズームアップ表示からの配置
テキストをズームアップ表示からの配置
【 html 】
1
<div class="main">
2
<div class="view view-sixth">
3
<img src="images/6.jpg" />
4
<div class="mask">
5
<h2>Hover Style #6</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-sixth">
13
<img src="images/8.jpg" />
14
<div class="mask">
15
<h2>Hover Style #6</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
hover effect【７】
画像を回転させながら消して、テキストをスライド表示
画像を回転させながら消して、テキストをスライド表示
画像を回転させながら消して、テキストをスライド表示
【 html 】
1
<div class="main">
2
<div class="view view-seventh">
3
<img src="images/10.jpg" />
4
<div class="mask">
5
<h2>Hover Style #7</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-seventh">
13
<img src="images/14.jpg" />
14
<div class="mask">
15
<h2>Hover Style #7</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
hover effect【８】
上からスライドしてきたフィルターとテキストがバウンドするエフェクト
上からスライドしてきたフィルターとテキストがバウンドするエフェクト
上からスライドしてきたフィルターとテキストがバウンドするエフェクト
【 html 】
1
<div class="main">
2
<div class="view view-eighth">
3
<img src="images/2.jpg" />
4
<div class="mask">
5
<h2>Hover Style #8</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-eighth">
13
<img src="images/6.jpg" />
14
<div class="mask">
15
<h2>Hover Style #8</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
hover effect【９】
両サイドからフィルターがスライド＋ひねりを加えたテキスト表示
両サイドからフィルターがスライド＋ひねりを加えたテキスト表示
両サイドからフィルターがスライド＋ひねりを加えたテキスト表示
【 html 】
1
<div class="main">
2
<div class="view view-ninth">
3
<img src="images/11.jpg" />
4
<div class="mask mask-1"></div>
5
<div class="mask mask-2"></div>
6
<div class="content">
7
<h2>Hover Style #9</h2>
8
<p>A wonderful serenity has taken possession of my entire soul,
9
like these sweet mornings of spring which I enjoy with my whole heart.</p>
10
<a href="#" class="info">Read More</a>
11
</div>
12
</div>
13
14
<div class="view view-ninth">
15
<img src="images/12.jpg" />
16
<div class="mask mask-1"></div>
17
<div class="mask mask-2"></div>
18
<div class="content">
19
<h2>Hover Style #9</h2>
20
<p>A wonderful serenity has taken possession of my entire soul,
21
like these sweet mornings of spring which I enjoy with my whole heart.</p>
22
<a href="#" class="info">Read More</a>
23
</div>
24
</div>
25
</div>
hover effect【１０】
画像ズームアップ表示してからのテキスト表示にフワッと切り替え
画像ズームアップ表示してからのテキスト表示にフワッと切り替え
画像ズームアップ表示してからのテキスト表示にフワッと切り替え
【 html 】
1
<div class="main">
2
<div class="view view-eighth">
3
<img src="images/2.jpg" />
4
<div class="mask">
5
<h2>Hover Style #8</h2>
6
<p>A wonderful serenity has taken possession of my entire soul,
7
like these sweet mornings of spring which I enjoy with my whole heart.</p>
8
<a href="#" class="info">Read More</a>
9
</div>
10
</div>
11
12
<div class="view view-eighth">
13
<img src="images/6.jpg" />
14
<div class="mask">
15
<h2>Hover Style #8</h2>
16
<p>A wonderful serenity has taken possession of my entire soul,
17
like these sweet mornings of spring which I enjoy with my whole heart.</p>
18
<a href="#" class="info">Read More</a>
19
</div>
20
</div>
21
</div>
以上、ここまでが10パターンのまとめ。
参考サイトhttp://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/
関連記事画像ホバー時に効果をつけるtips記事
【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ファイルに以下のコードを記述(※画像２枚分のコード) 【 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ファイルに以下のコードを記述(※画像２枚分のコード) 【 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ファイルに以下のコードを記述(※画像２枚分のコード) 【 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関連の記事
【TIPS】画像を４枚のパネルに分割してエフェクトをかけたスライダー
画像を４枚のパネルに分割してエフェクトをかけたスライダー４パターン。
まず、共通のhtmlを記述を記述してから、パターンごとのCSSを記述していく流れ。
共通のhtmlを記述を記述
まずは共通のhtmlを記述していく。
画像内のテキストは、＜div class=”cr-titles”＞のタグ内で書き換える。
【 html 】
1
<div class="container">
2
<section class="cr-container">
3
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1"
4
checked/>
5
<label for="select-img-1" class="cr-label-img-1">1</label>
6
7
<input id="select-img-2" name="radio-set-1" type="radio" class="cr-selector-img-2" />
8
<label for="select-img-2" class="cr-label-img-2">2</label>
9
10
<input id="select-img-3" name="radio-set-1" type="radio" class="cr-selector-img-3" />
11
<label for="select-img-3" class="cr-label-img-3">3</label>
12
13
<input id="select-img-4" name="radio-set-1" type="radio" class="cr-selector-img-4" />
14
<label for="select-img-4" class="cr-label-img-4">4</label>
15
16
<div class="clr"></div>
17
<div class="cr-bgimg">
18
<div>
19
<span>Slice 1 - Image 1</span>
20
<span>Slice 1 - Image 2</span>
21
<span>Slice 1 - Image 3</span>
22
<span>Slice 1 - Image 4</span>
23
</div>
24
<div>
25
<span>Slice 2 - Image 1</span>
26
<span>Slice 2 - Image 2</span>
27
<span>Slice 2 - Image 3</span>
28
<span>Slice 2 - Image 4</span>
29
</div>
30
<div>
31
<span>Slice 3 - Image 1</span>
32
<span>Slice 3 - Image 2</span>
33
<span>Slice 3 - Image 3</span>
34
<span>Slice 3 - Image 4</span>
35
</div>
36
<div>
37
<span>Slice 4 - Image 1</span>
38
<span>Slice 4 - Image 2</span>
39
<span>Slice 4 - Image 3</span>
40
<span>Slice 4 - Image 4</span>
41
</div>
42
</div>
43
<div class="cr-titles">
44
<h3><span>Serendipity</span><span>What you've been dreaming of</span></h3>
45
<h3><span>Adventure</span><span>Where the fun begins</span></h3>
46
<h3><span>Nature</span><span>Unforgettable eperiences</span></h3>
47
<h3><span>Serenity</span><span>When silence touches nature</span></h3>
48
</div>
49
</section>
50
</div>
51
次に、パターンごとのCSSを記述していく。
effect【 1 】 画像を押し出してスライド表示するエフェクト
画像を押し出してスライド表示するエフェクトのコード。
【 html 】
1
<head>
4
</head>
effect【 2 】 画像を押し出してスライド表示するエフェクトver2
画像を押し出してスライド表示するエフェクトver2のコード
【 html 】
1
<head>
4
</head>
effect【 3 】 上下にスライドしながら切り替わるエフェクト
上下にスライドしながら切り替わるエフェクトのコード
【 html 】
1
<head>
4
</head>
effect【 4 】 ふわっと切り替わるエフェクト
ふわっと切り替わるエフェクトのコード
【 html 】
1
<head>
4
</head>
参考サイトhttp://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/
関連記事他のスライドショー関連の記事
【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/
関連記事他のスライドショー関連の記事
