ITエンジニア/デザイナ向けにオープンソースを毎日紹介

iOS 7の登場以降注目を集めているパララックスエフェクト。広まっていく中で注目されるのはどこでどう使うかです。縦スクロールを行う際に使うのは一般化しつつあり、次はどこで使うのが効果的でしょうか。

その一例として紹介したいのがDestaqueです。スライドショーライブラリですが、そのスライド切り替えにパララックスエフェクトを使っています。

Destaqueの使い方

デモのスライドショー。デモであって筆者の好みとは全く関係ないのでご注意ください。でも良いですよね?(デモだけに)
デモのスライドショー。デモであって筆者の好みとは全く関係ないのでご注意ください。でも良いですよね?(デモだけに)

スライドの切り替わりが要素毎に速度が違います。ここがパララックスエフェクトです。スライドの写真ではなく、ここに注目してください。
スライドの切り替わりが要素毎に速度が違います。ここがパララックスエフェクトです。スライドの写真ではなく、ここに注目してください。

とは言え画像では分かりづらいので動画で紹介します。

スライドの切り替えにはフェードアウトやフェードイン、回転など様々なエフェクトがありますが、各要素の配置を考えたパララックスエフェクトを使ってみるのは面白いアイディアだと思います。

DestaqueはHTML5/JavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

Destaque Slideshow Demo

globocom/destaque

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2