今日のメモ2017/12/20

自社サイトのコーディングを行った。

コンテンツの出現時に浮遊感を与えたい。例えば http://taotajima.jp/works では全コンテンツがスクロールに合わせて上下している。参考に中央の2項目が真ん中にきていて、下スクロールなら上のものは離れていき、下のものがくっついてくる上スクロールならその逆が起きる。

widthを0から100にするanimationだと左から右に伸びる absoluteで位置を指定している場合はright:0を使うことで、右から左へ伸びるようになる。

前回はcanvasにjqueryで書いたハンバーガーメニューのアニメーションを今回はcssで挑戦。

cssでabsoluteの要素に対してtop:20px、height:5px とすると、20pxから25pxに対しての高さになる。

真ん中からにゅにゅっと出てくるバツ印について、 cssのみでやろうとするとmargin:0 50% -> margin:0のアニメーションでがたつく 4本で中央からそれぞれ斜めに伸びる感じでやってみるうまくいかない。結構がたがたしてしまう。アンドロイドとpcでがたつく。zoom倍率の問題？

スクロール取得 https://nkmrkisk.com/archives/789 わかりやすい

スクロールすると$("targ").offset()が逐一変化してしまう。 ->zoomをかけていたせいだった。 $("targ").get(0).offsetTop; で行ける。

$(".targ").height();で高さが取れるが、heightが付いてくる ->parseInt( $(elm).css('margin-left') ); でpx取り除ける

zoomを使っているからか、offsettopが表示されている値と異なるので注意。 zoomにかけている比率をかけると実際に表示されている比率に合うようになった。

自分でpng書き出しやjpg書き出しもフロントエンドがやれるといいらしい。

自社の案件?を進める。 1時間で1ページのマークダウンいけるか挑戦結局2時間半もかかってしまった。もっと早く組めるようになりたい。

が、少しずつ早く組めるようになってきたような気がする。