About

小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。

赤い電動車いすに乗って生活をしています。色々と不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。

好き:食べる/スロープ/エレベーター
嫌い:食事制限/段差/階段
※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。

気づけばグルメブログになってしまわぬよう、しっかり更新頑張ります!

Links

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

【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を透明にすることにより表現させております。

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

    サンプルを確認する

    コンテンツ一覧へ戻る

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

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

    コメントする

    トップへ戻る