X_NOTE

2014年9月2日火曜日

CSS3で簡単にページ切替を追加できる「Animsition」

フェードアウト、インでページ切り替えをしたりその他色々なトランジションで切り替えできる。ちょっと動きを追加したい時や動きに合わせた表現方法も考えられるかも。

◯サポートブラウザ
モダンブラウザとIE10以上

◯リンク

A simple and easy jQuery plugin used to add page transition on css animations.

2014年9月1日月曜日

Lato

Montserrat

Arvo

Roboto

参考サイト

Webフォントをできるだけ軽く表示する圧縮の.htaccessや遅延ロードJSを作ってみた

2014年7月15日火曜日

Virtual BOX ダウンロード方法、使い方まとめ

◯ダウンロードの仕方

→Macでも無料でIE確認するためのModern.IEが想像以上に快適だった

◯テキストをMacからVirtualBoxのWindowsへコピペする設定

→VirtualBoxでOS間のクリップボードを共有する方法

2014年6月9日月曜日

google maps マーカーとスタイルオリジナルに変更まとめ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>google maps sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

}
</script>
</head>

サンプル

参考サイト
・geocoding
住所から緯度経度を調べられる

・Google Maps API Styled Map Wizard - gmaps-samples-v3
googlemapの見た目を変えるJSONコードを書き出す。

・Googleマップをイラストマップみたいにしたい。
・Webサービス Google Map を簡単お洒落にカスタマイズ！「Styled Map Wizard」使ってみた。

2014年5月13日火曜日

Facebook広告用、OGP画像の最適サイズメモ。2014.05.13現在

Facebookの仕様がコロコロ変わるのであくまで現時点でのメモ。

・上記の画像の設定でいけそうですが
OGP画像推奨サイズは600×315px以上、1200×630pxらしいです。

参考サイト：FacebookのOGP画像の仕様がまた変更。ニュースフィードでもタイムラインでも欠けないようにする方法。（スマホ対応！最新版　※9.21追記）

ほぼ同じだと思いますが広告用の画像は広告の種類によって最適なサイズが違うらしい。
参考サイト：【Facebook最新情報】広告・リンク投稿の画像表示を最適化！画像を大きく＆クリック率を上げるために必要な設定基準はコレ！

※書き出す画像の形式は.pngが推奨。.jpgで書きだした時Facebook側の圧縮で画像が荒れたので。

2014年2月19日水曜日

[CSS3]使ったら面白いかもマウスジェスチャーで動くアニメーション

[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック

demo

[JS]このホバーエフェクト楽しい！シールのようにぺらっとめくるスクリプト -Sticker.js

demo

2014年2月13日木曜日

[JS]デモがめちゃ楽しい！jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js

参考サイト：http://coliss.com/articles/build-websites/operation/javascript/js-wow.html