新規追加!
iOS9で追加されたヤツ。新規追加でいろんな機能がでたみたいッスね。
後で確認用に少し組んでみます。
参考サイトQiita
backdropフィルタ対応
なんやらよーけあるみたいっすね。
CSS3のフィルタ効果って所でしょうか。
blur()
blur(2px);
ブラー処理 ピクセルで指定
-webkit-backdrop-filter: blur(2px);
grayscale()
grayscale(90%);
グレースケール パーセント指定
-webkit-backdrop-filter: grayscale(90%);
saturate()
saturate(30%);
彩度 パーセント指定
-webkit-backdrop-filter: saturate(30%);
sepia()
sepia(99%);
セピア パーセント指定
-webkit-backdrop-filter: sepia(99%);
invert()
invert(0.3);
反転 0~1の間で指定
基本0or1? 道中の値はグレーでマスクされてるような・・・なんとも言えない
-webkit-backdrop-filter: invert(0.3);
contrast()
contrast(250%);
コントラスト デフォ100% パーセント指定
上限はない?
-webkit-backdrop-filter: contrast(250%);
brightness()
brightness(3);
明るさ 0.0~上限なし?
-webkit-backdrop-filter: brightness(3);
hue-rotate()
hue-rotate(250deg);
色相変換 円になったカラー、グルグル回してる感じなんですかね(;´Д`)
degだし。
なので、0~360 361degは1degと同じになるようです。
-webkit-backdrop-filter: hue-rotate(250deg);
カルーセルバナー
スワイプで動く奴だそうで。
えー、こんなのできるんかー!
縦横両方いけるようですね。ただ、縦の場合はheightちゃんと設定しようぜって事ですか。
スクロールタイプも2通りあるようです。
scroll-snap-type: mandatory;で、途中でとまる
-webkit-scroll-snap-type: mandatory;で
.snap { margin: 20px auto; width: 80%; overflow: auto; white-space: nowrap; -webkit-scroll-snap-points-x: repeat(100%); -webkit-scroll-snap-type: mandatory; -webkit-overflow-scrolling: touch; } .snap > div { width: 100%; height: 150px; display: inline-block; line-height: 150px; text-align: center; font-size: 50px; } .snap > div:nth-child(even) { background-color: #87EA87; } .snap > div:nth-child(odd) { background-color: #87CCEA; }
.snap2 { height: 200px; width: 220px; overflow-x: hidden; overflow-y: auto; -webkit-scroll-snap-points-y: repeat(200px); -webkit-scroll-snap-type: proximity; font-size: 0; margin: 0 auto; } .snap2 > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } .snap2 > div:nth-child(even) { background-color: #87EA87; } .snap2 > div:nth-child(odd) { background-color: #87CCEA; }
Navigation Timing API
ブラウザーがWebの画面を表示する時にどこにどれだけ時間がかかているか知るAPI
だそうですが。。。
アクセス開始から細かく区切って秒数を保管しているようですね。
どこからどこまでが時間かかってるのかが分かるようですが。うわぁ。地味だなぁ(;´Д`)
感圧タッチイベント
これがやりたかったの!!!
感圧測定やっちゃうっぽい?
タッチとタッチムーブとかで動く
結果:
ムーブのほうは想定通り動きますが、タッチ部分に関しては出るんだけど・・・なんだか・・・
3Dタッチは正直アプリ専用じゃないかと思ってます。WEBは使いこなせる人がきっといない。
ハンバーガーメニューよりも分かりにくい(アイコンつけようにも表示領域の問題で厳しいんじゃないかと)
公式からのイベント動かなかったっぽい?
まだやりかけですが、引き続き調査してみる事にします