画像を4つのパネルに分割してエフェクトをかけたスライドショー3パターンのコードまとめ。
まず、ダウンロードした外部ファイルの中にある3パターン共通のCSSファイル(3ファイル)とJSファイル(3ファイル)を設定する。
【 html 】
1
<head>
2
<link rel=”stylesheet” type=”text/css” href=”css/normalize.css” />
3
<link rel=”stylesheet” type=”text/css” href=”css/demo.css” />
4
<link rel=”stylesheet” type=”text/css” href=”css/component.css” />
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/
関連記事
他のスライドショー関連の記事
PICK UP
TIPS記事セレクション
