※スマホ対応はしてません。

カテゴリー: CSS

ヘッダー、フッターの固定にposition:sticky使うとCSSだけで完結するし良いかも。

カテゴリー: CSS

というわけで、いまさら初めて使いました。

デモ

フッターも追加したよ。

使い方

.sticky-header {
  background-color: #fff;
  position: sticky;
  top: 0;
}

position: sticky にして、位置と背景色の指定も併せて行う。背景色がないと見えちゃうから。

position: fixed と違ってサイズ分の余白を自前で用意する必要がないのがらくちん。

利用可能状況

IE以外で使える。大丈夫そうだ。

一通りのウェブブラウザで利用可能。(Can I useより。)

table 関係が現行版だとちょっとまだアレっぽいけど、今回の目的には関係ない。

と思いました

思いつきなので細かいとこ調べてないや許して。スタック文脈とか絡んでくるときっと面倒くさそうな予感がする。

本来は長いコンテンツにたくさんの見出しがあって、みたいな場合に使うものだと思うんだけど、単純に上下端に固定する目的で使うのも悪くないんではないだろうか。だめです?

参考

なんかこう、しゅしゅしゅーんてな感じで動く検索画面のデモを作りました。

カテゴリー: CSS

こんなん。

雑に作ったので特に解説なし。

「フロントエンドエンジニア養成読本」を読んで、エンジニアになってよ!

カテゴリー: CSS, JavaScript, Web

著者の方々から頂いておりましたので、遅まきながらご紹介さして頂きたいと思います。

(すみません、半年近く経ってしまいました……。)

概要

  • ウェブのクライアント側の濃い技術がたっぷり
  • UXの話からブラウザーの仕組みまで
  • 難易度は高め、だけどそこまで高くはない
  • 全てを理解できなくても、勉強の指針として目次を頭に入れておくと良さそう
  • ツール解説は特になし
  • 「10年先も役立つ力をつくる」は本当だと思う

    (さらに…)

CSS 珍百景 Advent Calendar 2014 – 02日目

カテゴリー: CSS

すみません、三日目と勘違いしてました……。

今回はtransform:scale()とzoomの併用についてです。バグじゃないです。

デモ:

スムーズなアニメーションを実装するコツと仕組みを説明するよ。CPUとGPUを理解しハードウェアアクセラレーションを駆使するのだ!(Frontrend Advent Calendar 2013 – 06日目)

カテゴリー: CSS, JavaScript

この記事はFrontrend Advent Calendar 2013の6日目の記事です。昨日は谷さんでWeb Components/Polymerを軽く触ってみるでした。(これ今後数年で大流行りしそうに思うので、未読なら是非!)

さて、最近はHTML5だCSS 3だFlashやめてJS制御でアニメーションだーってんで盛り上がってるわけですが(周回遅れ)、いざアニメーションを実装してみても、なかなかスムーズに動いてくれなかったりしますね。

どうやったらスムーズに動くかってのを解説したいと思います。

なおこの辺りの情報は、概ね斎藤さんを中心としたFrontrend絡みの方々に教えて頂きました。感謝感謝。

先に結論

概念的なの

  • GPU合成レイヤーを適切に使うと早い
    • いわゆるハードウェアアクセラレーション
  • 何がCPUで、何がGPUで描画されるか知っておくべき

実際的なの

  • transformやopacityはイケてる
    • 他のアニメーションはコスト高いっぽい、特に色
  • 合成レイヤーの内容を変更しない
  • パラパラアニメは全コマ読み込み可視性の制御で
  • アニメの「コマ」が少なければ少ないほどハードウェアアクセラレーションの効果が出る

ぬるぬるアニメ、ざらざらアニメ

まずは実例からご覧頂きましょう。

(さらに…)