A Web Design Community curated by Chris Coyier.

写真データがひたすら右から左に流れているサイトに遭遇することがある。それは何らかのイベントで撮影したであろう写真データを流すものであったり、製品の写真を写すものであったりさまざまだが、煩雑なUIでなければなかなかクールな見た目になる。

この効果はJavaScriptを利用しなくともCSSを使うだけで実現可能だという説明がCSS-Tricksにおいて「Infinite All-CSS Scrolling Slideshow」として掲載された。シンプルなCSS3で構築されており興味深い。ここでのアイディアは、流しておきたい画像を横長の1つの画像として用意しておき、それをkeyframeでアニメーションさせるというものだ。

たとえば次のような横長の画像を「summer.jpg」として用意したとする。

永久にスライドさせておきたい画像データのサンプル

次のようにHTML5/CSS3を用意すると、画像が途切れることなく右から左へ流れ続けることになる。一番右端までいっても、連続で左端の画像が表示されるようになり、一見すると無限に回り続けているように見える。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Infinite Scrolling Slideshow</title>
  <style type="text/css">
.slideshow {
  position: relative;
  overflow: hidden;
  height: 480px;
  width: 3678px;
}
.images {
  background: url(./summer.jpg);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: slideshow 10s linear infinite;
  -moz-animation:    slideshow 10s linear infinite;
}
@-webkit-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
@moz-keyframes slideshow {
  0%    { left: 0; }
  100%  { left: -200%; }
}
  </style>
</head>
<body>
<div class="slideshow">
   <div class="images">
   </div>
</div>
</body>
</html>

ひたすら右から左へ続ける画像。

ここではChromeでの利用を想定。

「Infinite All-CSS Scrolling Slideshow」ではさらに2Dトランスフォームやアニメーションの機能をつかってもっとなめらかに表示する方法、2つの表示を組み合わせて魅せる方法なども紹介している。また、ダウンロードできる成果物にはOperaとIE向けのベンダプレフィックスのプロパティも含まれており、汎用的なサンプルコードとして参考になるものに仕上がっている。