新規追加!
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は使いこなせる人がきっといない。
ハンバーガーメニューよりも分かりにくい(アイコンつけようにも表示領域の問題で厳しいんじゃないかと)
公式からのイベント動かなかったっぽい?
まだやりかけですが、引き続き調査してみる事にします