画像を４つのパネルに分割＆エフェクト効果のスライドショー -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/
関連記事他のスライドショー関連の記事
