ごめんなさいね。 - Lopan.jpWebデザインとかサイト制作について、知ってる事知らない事を展開するサイト。
動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
Googleマップで応用編。
Google Maps JavaScript APIはJavaScriptで書かれてるので、JavaScriptを使えばいろいろ拡張できたりします:D。 ひとつの地図にマーカーをたくさん置いたり、1ページにたくさん地図を設置したり、地図と他のコンテンツを連動させたり、更新しやすくする工夫とか、いろいろおさらいしながらまとめてゆければと思います。 まずはマーカー周りのあれやこれやをまとめます！ 以下は目次です。クリックすると各項目へ移動します。 Google マップを表示する。 上下スクロールで地図をズームしないようにする マーカーを常に中央に表示する。 リサイズイベントを利用する リサイズし終わったら動かす 地図の大きさが変わった時だけ動かす 複数のマーカーを置く。 マーカーをふたつ置く マーカーをたくさん置く オリジナルアイコンをたくさん置く。 スマホでも綺麗に表示する 解像度が高いデバ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
