My Vector Space

人生は寄り道してなんぼ

【TIPS】画像を４枚のパネルに分割してエフェクトをかけたスライダー

HTML / CSS

画像を４枚のパネルに分割してエフェクトをかけたスライダー４パターン。

まず、共通の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 】画像を押し出してスライド表示するエフェクト

画像を押し出してスライド表示するエフェクトのコード。

sliding-image-panels-capture-1

【 html 】

1

<head>

2

<link rel="stylesheet" type="text/css" href="css/demo.css" />

3

<link rel="stylesheet" type="text/css" href="css/style1.css" />

4

</head>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

effect【 2 】画像を押し出してスライド表示するエフェクトver2

画像を押し出してスライド表示するエフェクトver2のコード

sliding-image-panels-capture-2

【 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>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

effect【 3 】上下にスライドしながら切り替わるエフェクト

上下にスライドしながら切り替わるエフェクトのコード

sliding-image-panels-capture-3

【 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>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

effect【 4 】ふわっと切り替わるエフェクト

ふわっと切り替わるエフェクトのコード

sliding-image-panels-capture-4

【 html 】

1

<head>

2

<link rel="stylesheet" type="text/css" href="css/demo.css" />

3

<link rel="stylesheet" type="text/css" href="css/style4.css" />

4

</head>

●スタイルシートは、ダウンロードした外部ファイル()の中にあるパタごとに異なるstyle1～4のいずれかを設定

●使用する画像は、style.cssにbackground-imageプロパティで設定

参考サイトhttp://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/

関連記事他のスライドショー関連の記事

PAGE TOP