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

Dragdealer JSはスライダーやスライド表示を行うJavaScriptライブラリ。

Dragdealer JSはJavaScript製のオープンソース・ソフトウェア。かつてはWebサイトのちょっとしたイフェクトくらいにしか使われてこなかったJavaScriptだが、Ajaxの登場あたりから一気に注目が集まっている。もはやJavaScriptを使っていないWebサイトの方が珍しいくらいだ。


スライダー

JavaScriptを使った様々なイフェクト、ウィジェットが存在するが画像のスライド表示はよく使われている機能の一つだろう。そこで紹介したいのがDragdealer JS、ちょっと変わったスライドライブラリだ。

Dragdealer JSは主に二つの機能がある。一つはマウスドラッグのスライダーで、縦または横にスライダーを表示する。縦の場合であればスクロールバーのように使うことができる。マウスのスクロールには対応していないようだ。横であればレンジのようにしたり、文字サイズをダイナミックに切り替えるといった用途が考えられる。


斜めに変化するのは新しい

そしてもう一つが画像のスライド機能だ。写真の切り替えであればよくあるが、Dragdealer JSが面白いのは一枚の大きな写真を分割してスライドさせることができる点だ。これを使えば面白いイフェクトがあるプレゼンテーションを作ることもできるし、Webサイトの紹介に使っても面白そうだ。アイディア次第で面白い使い方ができそうなライブラリだ。


MOONGIFTはこう見る

Webサイトでは上から下に情報が流れるのが当たり前になっている。それだけに時々左から右へ流れるイフェクトを使うことでインパクトを高めることができる。視点の変化が新鮮さを与え、印象を強くする。あまりインパクトを高めると却ってストレスになるので注意が必要だ。

Dragdealer JSではさらに斜めに移動したりする効果がつけられる(Canvasを使っているのでブラウザが限定されそうだが)。Webサイトの最初のスプラッシュにつかったりするとインパクトがありそうだ。単なるスライドではユーザも目が慣れてしまっている。ちょっとした変化をつけることでユーザの認識が全く異なるものになるはずだ。

デモ:Dragdealer JS

dragdealer - drag provider – the good stuff - Google Project Hosting

 

MOONGIFTの関連記事

  • DevRel
  • Com2