今日のメモ2017/12/22

実装実装実装の１日だった。 そしてやはりスマートフォンのデバイス毎の表示の違いの問題に悩まされた。

昨日の横に開けるスライドはできた。 スライドをいい感じにする。 スライドしてパッとメインコンテンツが出てくるように、 ロードの間で後ろにレンダリングしていくようにした。 後ろに要素自体はあるのでスクロールできないようにモーダルの後ろにあるメインコンテンツをposition:fixedにすることでスクロールは止められた。 が、しかしながらiphone7やiphoneXで、webフォントのフォントサイズが崩れるという事態が起きた。 ロードのタイミングの問題なのだろうか。

webフォントはfonts.comのCDNを使っている。 フォントのロード完了のタイミングを知るためにwebfontloaderを使っている。 が、組み込み方が悪いのか、ロードが終わらず、タイムアウトも走らない時があった。

afterは元の要素が親要素の役割。 top:0なら親のtop:0にくっつく rotateする際の基準点をtransform-originで動かせる

mixinの使い方を忘れたので練習 @mixin name(arg){ @content; }

keyframesに引数渡したいところ。いい方法を探す。

cssに複数のアニメーションを登録したい 条件1で右から出てきて、 条件2左へ抜けて、 条件3で形を変える とか。

jqueryをつかわずにネイティブで書いてみる $(window).scroll()は document.documentElement.scrollTop || document.body.scrollTop らしい。