最近はトップページにスライド表示を行うWebサイトが増えています。そのため、単に表示しただけではインパクトがなくなってきてユーザの目に留まることが減ってしまっています。求められるのはさらなる変化です。 そこで紹介したいのがFour Boxes Slideshowです。スライド表示の切り替えにボックスを使ったダイナミックなアニメーションを実現しています。

Four Boxes Slideshowの使い方

後は動画で見てもらうのが分かりやすいでしょう。

一つの画像が4つに分かれてアニメーションしながら切り替わっていきます。このとき、単に1つの画像を表示しているのではなく、1つの画像を4つに分割して表示し、それぞれにアニメーションしてるのがポイントと言えます。

HTML上は

<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>

のようになっていますが、Four Boxes Slideshowによって

<div class="panel current">
  <div class="bg-tile"><div class="bg-img"><img src="http://tympanus.net/Tutorials/FourBoxes/img/1.jpg"/></div></div>
  <div class="bg-tile"><div class="bg-img"><img src="http://tympanus.net/Tutorials/FourBoxes/img/1.jpg"/></div></div>
  <div class="bg-tile"><div class="bg-img"><img src="http://tympanus.net/Tutorials/FourBoxes/img/1.jpg"/></div></div>
  <div class="bg-tile"><div class="bg-img"><img src="http://tympanus.net/Tutorials/FourBoxes/img/1.jpg"/></div></div>
</div>

のように分割して描画しているのが面白さです。

Four Boxes SlideshowはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

Four Boxes Slideshow | Demo 1 How to Create a Tiled Background Slideshow | Codrops