【JavaScript】Pressure.jsで美女をアレコレしてみた

※あくまでJavaScriptを真面目（？）に学習している内容になります。笑

以前にも一度記事を書かせていただきました、Web上で3D Touchを再現できるJavaScriptでPressure.jsというのがあるのですが、今回も再び弄って遊んでみたので紹介したいと思います。

前回の記事はこちら！
【JavaScript】3D Touchに対応させられるというPressure.jsを試してみた

まぁいいからまずはサンプルを見せてくれ！という方はこちら！

サンプルを確認する

3つのパターンによるサンプル

美女の写真を題材に、今回は3つのパターンでサンプルを作ってみました。

• モノクロ→本来の色へ変化していく美女
• モザイク→取れていき現れる美女
• グレーのオーバーレイ→薄れていき現れる美女

そもそもこのJavaScriptの仕組みは、タップされている間に0～1へと変化する数値を利用するというものになるのですが、この数値を別の値にマッピング（割り当て）することができるのです。

例えばモノクロ→本来の色ですと、CSSの値を次のように変化させます。
filter: grayscale(100%);→filter: grayscale(0%);

この変化部分のJavaScriptを一部抜粋すると、次のようになります。

change: function( force, event ){
  this.style.filter = 'grayscale('+Pressure.map( force, 0, 1, 100, 0 )+'%)';
  this.style.webkitFilter = 'grayscale('+Pressure.map( force, 0, 1, 100, 0 )+'%)';
},

0→1の変化を100→0にマッピングしています。

それでは、3パターンそれぞれについて解説していこうと思います。

（解説はいいからまずはサンプルを見せてくれ！という方はこちらから！笑）

サンプルを確認する

コンテンツ一覧へ戻る

モノクロ→本来の色へ変化していく美女

HTML

<div id="test1">
  <img src="/sample/images/js015/img01.jpg" alt="">
</div>

CSS

#test1 img {
  -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
}

JavaScript

Pressure.set( '#test1 img', {
  start: function( event ){
  },
  end: function(){
    this.style.filter = 'grayscale(100%)';
    this.style.webkitFilter = 'grayscale(100%)';
  },
  startDeepPress: function( event ){
  },
  endDeepPress: function(){
  },
  change: function( force, event ){
    this.style.filter = 'grayscale('+Pressure.map( force, 0, 1, 100, 0 )+'%)';
    this.style.webkitFilter = 'grayscale('+Pressure.map( force, 0, 1, 100, 0 )+'%)';
  },
  unsupported: function(){
  }
}, {polyfillSpeedUp: 1000, polyfillSpeedDown: 300} );

先程も少し触れたように、タッチされている間にfilterのgrayscaleの値が100%→0%へと変化していくように、記述してます。

実際のサンプルはこちら！

サンプルを確認する

コンテンツ一覧へ戻る

モザイク→取れていき現れる美女

HTML

<div id="test2">
  <img src="/sample/images/js015/img02.jpg" alt="">
</div>

CSS

#test2 img {
  -webkit-filter: blur(10px);
          filter: blur(10px);
}

JavaScript

Pressure.set( '#test2 img', {
  start: function( event ){
  },
  end: function(){
    this.style.filter = 'blur(10px)';
    this.style.webktFilter = 'blur(10px)';
  },
  startDeepPress: function( event ){
  },
  endDeepPress: function(){
  },
  change: function( force, event ){
    this.style.filter = 'blur('+Pressure.map( force, 0, 1, 10, 0 )+'px)';
    this.style.webktFilter = 'blur('+Pressure.map( force, 0, 1, 10, 0 )+'px)';
  },
  unsupported: function(){
  }
}, {polyfillSpeedUp: 1000, polyfillSpeedDown: 300} );

もうこの時点で何となく予想がつく方もおられると思いますが…基本的にはモノクロ→本来の色へとやっていることは同じですね。

filter: blur(10px);ということで、CSSで元々10pxのぼかしを入れており、タッチされている間にfilterのblurの値が10px→0pxへと変化していくように、記述してます。

実際のサンプルはこちら！

サンプルを確認する

コンテンツ一覧へ戻る

グレーのオーバーレイ→薄れていき現れる美女

HTML

<div id="test3">
  <img src="/sample/images/js015/img03.jpg" alt="">
  <div class="overlay"></div>
</div>

CSS

#test3 {
  position: relative;
  line-height: 0;
}
#test3 .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #ccc;
  border-radius: 20px;
}

JavaScript

Pressure.set( '#test3 .overlay', {
  start: function( event ){
  },
  end: function(){
    this.style.opacity = 1;
  },
  startDeepPress: function( event ){
  },
  endDeepPress: function(){
  },
  change: function( force, event ){
    this.style.opacity = Pressure.map( force, 0, 1, 1, 0 );
  },
  unsupported: function(){
  }
}, {polyfillSpeedUp: 1000, polyfillSpeedDown: 300} );

今までの2つのサンプルの場合は対象がimg（画像）でしたが、今回は.overlay（div）となります。
HTMLの記述を見ても、imgタグと並列に.overlayが存在していることが確認できますね。

ただやっている事自体は今までと変わらず、この場合はタッチされている間にopacityの値を1→0と変化していくように記述し、覆いかぶさっているdivを透明にすることにより表現させております。

実際のサンプルはこちら！

サンプルを確認する

コンテンツ一覧へ戻る

ちょっと面白い動き、こだわった表現をさせたい場合など…役に立つ場面は色々あるのかなと思ってます！

以上、サボりにサボった久々更新でした…！