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. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  2. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  3. Drooltip.js

    JavaScript

    拡張性の高い美しいツールチップを実装できる「Drooltip.js」

    Drooltip.jsは、美しくパワフルで拡張性の高いツールチップを実…

  4. Material ScrollTop Button
  5. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  6. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

最近の記事

  1. MacBook AirとHyperJuiceのモバイルバッテリー
  2. サラテクト 虫よけシート
  3. Apple SDカードリーダー
  4. 10種の野菜と5種のビーンズ サラダラップとドリップコーヒー
  5. EOS RP
PAGE TOP