2016年9月のてげWebまとめ
-
- いいね！6
megushio
@megushio
シゲヤマさんの最近の興味・関心ゴトは、Mac book Air の新型がどんなのか、おいくら万円なのか…なんだそうな。 #tegeweb
2016-09-30 20:30:29
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
マネジメントは平たく言うと目標に向かってPDCAサイクルを回すこと、コントロールはルール通りに物事を行うこと。なるほどなぁ。 #tegeweb
2016-09-30 20:35:39
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
CSSアニメーションはデフォルト状態からCSSのプロパティが変更された状態へアニメーションさせる。transitionプロパティ、animationプロパティを使う。アニメーションが動作するタイミングはCSSで設定したり、JSで設定したり。 #tegeweb
2016-10-09 16:46:56
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
CSSで指定するときはデフォルトで transition プロパティを仕込んでおいて、hover擬似クラスやfocus擬似クラスなどに状態が変わるプロパティを指定する。もしくは同様の擬似クラスに状態が変わるプロパティと共にanimationプロパティを指定。 #tegeweb
2016-10-09 16:52:30
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
jsでアニメーションのタイミングを指定するときはclick, mouseover, scrollなどのイベントハンドラにアニメーションの設定をしてあるクラス名を追加・削除する。jsでしか処理できないイベントはこれでOK。 #tegeweb
2016-10-09 16:56:07
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
easeとかlinearとか決まったキーワード以外のアニメーションタイミングを指定したいときにはベジェ曲線の関数をCSSでしていするのだけども、計算で作るのは難しいのでWebサービスを利用すると便利。 cubic-bezier.com #tegeweb
2016-10-09 16:57:53
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
IE9でCSSアニメーションできるか→IE9ではtransitionプロパティ、animationプロパティがサポートされていないのでjQueryのanimateメソッドを使うことになる。もしくはあきらめる。 #tegeweb
2016-10-09 16:59:18
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
絵本の絞り込みでCSSアニメーションを使った例。 kaiseisha.co.jp/special/ericca… #tegeweb
2016-10-09 17:00:39
森 史憲🍛🍻🍫 / コーディングデザイン
@mr_moo555
キャラクター説明の吹き出しにCSSアニメーションを使った例。アニメーションが表示されるのはPC版のみ。 kaiseisha.co.jp/special/nontan… #tegeweb
2016-10-09 17:02:21