キャンペーンサイトに使えそう!<CANVAS>タグを使った画像のスクラッチ表現

<canvas>タグを使った、画像のスクラッチ表現を紹介します。

キャンペーンサイトに使えそう!<CANVAS>タグを使った画像のスクラッチ表現

キャンペーンサイトに使えそう!<CANVAS>タグを使った画像のスクラッチ表現

Scratch Reveal with <canvas>は、<canvas>タグとJSで実装する、画像のスクラッチ表現です。

カラフルな写真にマウスを載せて、ドラッグすると、スクラッチを削るようにグレースケースの写真が現れます。

キャンペーンサイトに使えそう!タグを使った画像のスクラッチ表現

もちろん、デフォルトをグレースケールの写真にして、スクラッチでカラフルな写真を表示させることも可能です。

例えば、キャンペーンサイトなどで、画像にシリアルコードや当たり、ハズレのマークを埋め込んでおいて、ユーザーが画像を削ると表示される、という使い方ができそうです。

実装方法

デフォルトに表示される画像と、スクラッチで削った後に表示される画像の2枚を用意しておきます。

HTML

<canvas>を用意します。

CSS

背景のbackground-imagehttps://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/calgary-bridge-1943.jpgの部分が最初に表示される画像です。

JS

元の画像のURLを書き換える形で、スクラッチ後に表示する画像のURLを指定します。img.loc = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/';の部分で、デフォルトの画像URLの内、書き換えない部分を指定します。img.filename = 'calgary-bridge-2013.jpg';の部分で、デフォルトの画像URLの内、書き換える部分を指定します。

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Views 424