2012-05-18

ところてんスクローラー

Facebookに買われたという話で知ったLightboxという写真共有サービスのLive Streamの見せ方が良いなと思ったのでCSS Transitionsを使ったもどきっぽいのを作った。Pure CSSではない。良い名前思い浮かばなかった。

つまりはどんどん画像を押し出していくのをディレイとアニメーションを組み合わせて見せるというもので、ディレイをJavaScriptで、アニメーションをCSSで実装した。

var container = document.getElementById("scroller");

window.setInterval(function () {
  var img = document.createElement("img"),
    li = document.createElement("li");

  img.src = "http://lorempixel.com/120/160/";
  img.addEventListener("load", function () {
    this.className = "loaded";
  });

  li.appendChild(img);

  container.insertBefore(li, container.firstChild);
}, 3000);

ディレイは普通にwindow.setInterval()で3秒ごとに画像を先頭に追加していく。後にアニメーションのトリガーに使うために画像に読み込み完了でloadedというクラス名を振る処理も付けておく。

#scroller img {
  height: 0px;
}

#scroller .loaded {
  height: 160px;
  transition: height 0.2s ease;
}

imgをデフォルトでheight: 0pxにしておき、画像の読み込み完了時に付くクラス名.loadedで高さを戻す。その時に同時にCSS Transitionsを使うことによってアニメーションさせる。Firefox 12でCSS Transitionsが動いてないのはよくわからない。能動的なアクションしかトリガーにできないとかなんか制限ありそう。

有限数の画像をどんどん追加していくというのならCSSだけでもできそう。トリガーは:target擬似クラスしかなさそうで、そこがアレだけど、ディレイは有限個なのでそれを考慮すればtransition-delayプロパティーで大丈夫。