My Vector Space

  人生は寄り道してなんぼ

画像を4つのパネルに分割&エフェクト効果のスライドショー -Four Boxes Slideshow-

 

画像を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/

 

 

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

PAGE TOP