プリズムのようにキラキラと光を反射するエフェクトのスライダー「Prism Effect Slider with Canvas」
Contents
プリズムのようにキラキラと光を反射するエフェクトのスライダー「Prism Effect Slider with Canvas」
画像の一部を反射させるプリズム効果が美しいスライダー「Prism Effect Slider with Canvas」。HTML5のカンバスとJavaScriptを使って実装されており、IE９にも対応する優れものです。
エフェクトは３種類あります。
ダイヤモンド
ペンローズの三角形
不可能な四角形
canvasのglobalCompositeOperationプロパティを使用し、画像の上に複数のSVGをマスクとして描画することで、複雑なプリズム効果を生み出しています。
this.context.globalCompositeOperation = 'source-atop';
このプロパティについては、HTML5.jpに詳しく説明されているのでご参照ください。
それでは、このスライダーの使い方をご紹介します。
１、ダウンロード
ダウンロードはこちらから。
２、ファイルを読み込む
CSSを<head>内で、JSを<body>の閉じタグ直前で読み込みます。
最後に読み込むJSはエフェクトの種類によって変わります。ここではダイヤモンド型のJSである「slideshow1.js」を読み込んでいます。
[HTML]
<head> <link rel="stylesheet" type="text/css" href="css/component.css"> </head> <body data-rsssl=1> <!-- コンテンツ --> <script src="js/utils/rAF.js"></script> <script src="js/utils/easing.js"></script> <script src="js/PrismSlider.js"></script> <script src="js/slideshow1.js"></script> </body>
３、コンテンツ部分を記述
スライダーは、マスク用のSVGと画像を羅列するだけのシンプルなコードです。
これを、cacheクラスで囲みます。
<div class="cache"> <!-- masks --> <img decoding="async" src="img/masks/prism-a.svg"> <img decoding="async" src="img/masks/prism-b.svg"> <img decoding="async" src="img/masks/prism-c.svg"> <!-- photos --> <img decoding="async" src="img/bird-a.jpg"> <img decoding="async" src="img/bird-b.jpg"> <img decoding="async" src="img/bird-c.jpg"> <img decoding="async" src="img/bird-d.jpg"> </div>
４、ナビゲーション部分を記述
ナビゲーションもとてもシンプル。
下記の５行のコードをスライダーの後に追加します。
[HTML]
<div class="wrapper"> <div class="prism-slider"> <ul class="navigation"></ul> </div> </div>
以上で出来上がりです。簡単ですね。
画像をよりアーティスティックに、美しく見せてくれる「Prism Effect Slider with Canvas」。ブラウザ対応の幅が広いので、実用的だと思います。
興味があれば、ぜひ試してみてください。