サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
qiita.com/skwbr
低電力モードとは iOSのいわゆる「節電」モード。 低電力モードがONの場合、 ウェブコンテンツにおける動画や音声のなど、電池を消耗するような演出の自動再生がされない。 また、JSのTimerイベント処理なども期待値より遅くなったりする。 やりたいこと 例えば 背面にmp4動画を敷いて自動再生させる演出のウェブサイトの場合、 低電力モード状態でアクセスすると、背面の動画が停止し、ブラウザ側の再生ボタンが表示されてしまう。 これは不格好なので、「低電力モードの場合」だけ、背景を静止画版にするなど、処理を出し分けたい。 やり方 残念ながら 低電力モード かどうかを判定する正式なメソッドはなさそう。 そこで以下のようなコードで低電力モードかどうかを判定するアイデアが紹介されていた。 デモ(Codepen)はこちら: 低電力モード判定テスト https://codepen.io/skwbr/pen
<li data-id="archive_001">/archive/movie/2014/mov_001.mp4</li> <li data-id="archive_002">/archive/movie/2014/mov_002.mp4</li> <li data-id="archive_003">/archive/movie/2014/mov_003.mp4</li> <li data-id="archive_004">/archive/movie/2014/mov_004.mp4</li> <li data-id="archive_005">/archive/movie/2014/mov_005.mp4</li> <li data-id="archive_006">/archive/movie/2014/mov_006.mp4</li> <li data-id="archive_0
DEMO デモを追加しました (2015-10-16) http://codepen.io/skwbr/pen/bVoJqw 概要 CSS3のanimation-timing-function: steps(n) が便利なのでGifアニメやJSを使用したPNGシーケンスはもう使わないようにしたいな、という話です。 例えば のようにY方向に100pxの間隔で5コマを並べたSprite画像があるとして、 background-positionでコマ送りアニメーションをさせるときは良くJSが使われていますが、 CSS3の animation-timing-function: steps(n); を使うとその代わりができます。 .hoge { ..... animation: parapara 1s steps(5) 0s infinite; } @keyframes parapara { 0%
サンプル http://codepen.io/skwbr/full/JdJWqV (※横着してwebkitプレフィックスしかつけていないのでChromeからどうぞ...) 解説 フワフワというかゆらゆらというか宙に浮いているようなアニメーションをさせる場合。 <ul> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> <li><a href="#"><img src="hogera.png"></a></li> </ul> @keyframes horizontal { 0% { transform:translateX( -3px); } 100% { transform:translateX( 0px); } } @keyframes verti
JSを使わずにCSSだけで、 「要素の個数に応じてスタイルを出し分ける」やり方の紹介です。 前にどこかのサイトで紹介されてたのですがブックマークなかったのでメモです。 Demo "個数に応じたスタイルの出し分け" http://codepen.io/skwbr/pen/JKbNMP 説明 個数に応じてスタイルを変える場合、下記を組み合わせて使います。 :nth-last-child 擬似クラス … 最後から数えて何番目か 間接セレクタ ~ … それ以降の後続する弟要素(同階層) <ul> <li class="item"></li> <li class="item"></li> <li class="item"></li> : </ul>
やりたいこと 横スクロールするナビを組みたい … ① スマホ(iOS)で慣性スクロールにしたい … ② スクロールバー非表示にしたい … ③ ②と③を両立させたい ① 横スクロールするナビを組みたい スマホサイトでよく見る上図のようなナビゲーションを組みたいとします。 今回は、一つ一つの li を table-cell にし、水平に並べつつ、ウィンドウからはみ出た分を overflow-x: auto; で横スクロールさせるシンプル組み方で考えます。 デモ → https://s.codepen.io/skwbr/debug/QjaBLV/NjrYzwNZpgwA (コードは下記にて) ② スマホ(iOS)で慣性スクロールにしたい overflow: auto; をかけている要素に下記を指定すればOK。 ③ スクロールバー非表示にしたい webkit独自拡張の ::-webkit-scro
最近のviewport指定 タッチデバイス用のviewport指定として、user-scalable=no にしない(ユーザの操作の任意性を奪わない)ことが最近では推奨されるようになっています。 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
このページを最初にブックマークしてみませんか?
『qiita.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く