車いすなコーダーAbout小樽で3年と少し経験を積み、現在は札幌でコーダーをしております。赤い電動車いすに乗って生活をしています。不便はありますが、行列待ち等の椅子がない状況では、真価を発揮します。※スロープやエレベーターに関しては、もはや好きという感情では収まり切れません。NovJavaScriptPressure.js※あくまでJavaScriptを真面目(?)に学習している内容になります。Touchを再現できるJavaScriptでPressure.jsというのがあるのですが、今回も再び弄って遊んでみたので紹介したいと思います。Touchに対応させられるというPressure.jsを試してみたまぁいいからまずはサンプルを見せてくれ!という方はこちら!サンプルを確認するコンテンツ一覧3つのパターンによるサンプル美女の写真を題材に、今回は3つのパターンでサンプルを作ってみました。モノクロ→本来の色へ変化していく美女モザイク→取れていき現れる美女グレーのオーバーレイ→薄れていき現れる美女そもそもこのJavaScriptの仕組みは、タップされている間に0~1へと変化する数値を利用するというものになるのですが、この数値を別の値にマッピング(割り当て)することができるのです。モノクロ→本来の色ですと、CSSの値を次のように変化させます。grayscale(0%);この変化部分のJavaScriptを一部抜粋すると、次のようになります。)+'%)';},0→1の変化を100→0にマッピングしています。それでは、3パターンそれぞれについて解説していこうと思います。);先程も少し触れたように、タッチされている間にfilterのgrayscaleの値が100%→0%へと変化していくように、記述してます。);もうこの時点で何となく予想がつく方もおられると思いますが...基本的にはモノクロ→本来の色へとやっていることは同じですね。blur(10px);ということで、CSSで元々10pxのぼかしを入れており、タッチされている間にfilterのblurの値が10px→0pxへと変化していくように、記述してます。);今までの2つのサンプルの場合は対象がimg(画像)でしたが、今回は.overlay(div)となります。HTMLの記述を見ても、imgタグと並列に.overlayが存在していることが確認できますね。やっている事自体は今までと変わらず、この場合はタッチされている間にopacityの値を1→0と変化していくように記述し、覆いかぶさっているdivを透明にすることにより表現させております。Posts2019.07.15「別のプログラムがこのフォルダーまたはファイルを開いているので、操作を完了できません。