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. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  2. Tilt.js

    JavaScript

    パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

    Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエ…

  3. jQuery Pit-scheduler v2.0
  4. Jqx-Media-Slider
  5. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

  6. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

最近の記事

  1. M360bt

アーカイブ

PAGE TOP