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

最近、Webサイトの背景に大きな写真を埋め込む表示が見られるようになってきました。デザイナーのプロフィールサイトやランディングページに使うとインパクトがあります。

さらにその写真が複数あるといった時に使ってみたいのがVegasです。画像の切り替えをスタイリッシュに行ってくれるjQueryプラグインです。

Vegasの使い方

例えばこんな感じに。写真のインパクトがすごいですね。
例えばこんな感じに。写真のインパクトがすごいですね。

それがこうやって切り替わります。ちょっとドットでフィルターがかかっているあたりがポイントですね。
それがこうやって切り替わります。ちょっとドットでフィルターがかかっているあたりがポイントですね。

実際に切り替わるところ。前の写真がフェードアウトしつつ、新しい写真に切り替わっていくのが分かるでしょうか。
実際に切り替わるところ。前の写真がフェードアウトしつつ、新しい写真に切り替わっていくのが分かるでしょうか。

左右や上下のスライドではなく、フェードイン/アウトを効果的に使っているのに注目です。写真のトーンを統一してあると一段と格好良さそうです。

VegasはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Vegas Background jQuery Plugin

jaysalvat/vegas

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2