Prism Effect Slider

JavaScript

プリズム効果を実装することができるスライダー「Prism Effect Slider」

おもしろいスライダーがあったのでご紹介します。Prism Effect Sliderというプリズム効果を実装することができるスライダーです。デモを見れば分かると思いますが、ダイヤモンドやキューブの形をしたプリズムエフェクトがスライダーに加えられています。

Prism Effect Slider

Prism Effect Sliderの実際のデモは以下からチェックすることができます。

Prism Effect Slider

デモ

デモではダイヤモンド、トライアングル、キューブと3つの形をしたエフェクトを見ることができます。

スライドで画像を移動させてみると中央にある図形がたくさんの鏡に反射しているかのようなエフェクトになりますね。とても不思議な感じです。スライダー自体はとてもシンプルですね。

HTML5のCanvasのプロパティであるglobalCompositeOperationやJavaScriptなどが使われているとのこと。

というわけで、プリズム効果を実装できるスライダー「Prism Effect Slider」のご紹介でした。

Prism Effect Slider

1つのテキストリンクから複数のリンク先が表示される「μllinx」前のページ

ページが読み込まれるまでローディングアニメーションを表示できる「jqueryIntroLoader」次のページjqueryIntroLoader

関連記事

  1. JavaScript

    jQuery MobileでWebサイトをスマートフォン対応にする時に見ておきたい記事のまとめ

    今更ながらようやくjQuery Mobileを使い始めたんですが、基本…

  2. no-image

    JavaScript

    マスクエフェクトが素敵なスライダー実装「Masked Circle Slider」

    Masked Circle Sliderは、円形のマスクエフェクトが素…

  3. ScrollPress

    JavaScript

    スムーズなアニメーションのスクロールトップ実装「ScrollPress」

    ScrollPressは、スムーズなアニメーションによるスクロールトッ…

  4. EndlessRiver

    JavaScript

    エンドレスに流れていくコンテンツスライダー「EndlessRiver」

    EndlessRiverはエンドレスに流れていくコンテンツスライダーを…

  5. AniX

    JavaScript

    優れたパフォーマンスと互換性を備えたアニメーションライブラリ「AniX」

    AniXは優れたパフォーマンスと互換性を備えた軽量のアニメーションライ…

  6. textwriteout

    JavaScript

    テキストの書き出し・削減ができるjQueryプラグイン「textwriteout」

    textwriteoutは指定したテキストを書き出したり削減したりでき…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP