グラビカ学習帳～四谷のホームページ制作会社 gravity works（グラビティ・ワークス）備忘録と知識の共有と蓄積

コーディングをする際にできるちょっとした工夫をメモ。

■マウスオーバー
画像をふわっとオーバーします。

jQueryで簡単実装！フェードエフェクト付き画像ロールオーバー

サンプル


■マウスオーバー
背景色をふわっとオーバーします。

[jQuery] メニューの背景色をロールオーバーでふわっと変える

サンプル


■画像の表示
ふわっと表示させられます。

画像に遅延表示っぽいエフェクトを与えるだけのm5LazyDisplay

サンプル

PCサイトの階層に「sp」などのスマホサイト用階層を作り、
その中にPCサイトと同じ構造でスマホサイトが作られているときに、
スマホサイトからPCサイトへのURLを自動取得するJSです。

ようするに「PC版を見る」ボタン用のURLを自動で入れるJSです。

タイトルも説明も長いですが、
ソース自体はURLから /sp/ を外すだけの簡単なものです。

2012.9.24 修正
ソースが大雑把過ぎたので追記しました（水色箇所）。

■JS
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
   $("#btn_pc").click(function(){
     var s = location.pathname.split("/sp/");
     location.href = s[0] + '/' + s[1];
   });
});
</script>

■HTML
<a href="javascript:void(0);" id="btn_pc">PC版を見る</a>


サンプル
ダウンロード

赤文字が階層名ですので、任意のフォルダ名に変更してください。

.clickの部分にjQueryを使っていますので、
jQuery使わない方は書き換えてみてください。

以前ローディングアニメgifのジェネレータについて書きましたが、
こちらで配布されているアニメーションgifにも同じくらいお世話になっています。

■PIXEL LAB
http://www.pixelimage.jp/blog/2012/04/loading_icon.html

シンプルで何にでも合わせやすそうなものが揃っています。

なにより、いくつかドットがぱっきりした（アンチエイリアスのかかってない）
ものがあり、背景色が固定でないところでも使えて便利です！

今後も多用しそうな素材集です。

photoshopでレイアウトする際、地味に手間がかかるガイドを引く作業。
こちらのエクステンションを使えば簡単に作成できます！


GuideGuide
上下左右のマージンに中心線など、細かく設定できて、
１クリックでガイドが引けてしまうので、とっても便利です！

続いて、
「サイト作るときに便利なPhotoShop JSX、ショートカット、アクション」
という記事で紹介されていました。
かゆいところに手が届く、スクリプト詰め合わせです。
自作されたそうです。感謝です！

個人的には、一度書いた角丸のを数値指定で変更できる「角丸具合変更」と
複数選択したテキスト、シェイプを一度で変更できる「カラーピッカー」は、
便利ですばらしいです！

そして、
CS6からシェイプツールでドキュメントをクリックすると、ダイアログが表示され、
任意のサイズでシェイプを書く事ができるようになってました。

■ClockMaker Labs
http://clockmaker.jp/labs/

Flash Stage3Dを使用したサンプルを多数紹介されているサイトです。

サイトそのものがかなり素敵で、こういう動かしてるだけで
気持ちいいようなサイトを久々に見たような気がします。
（といっても最近できたサイトではありませんが）

紹介されているサンプルもどれもクオリティが高く、
どちらかというとギャラリーサイトみたいな感覚で眺められます。

実際、内容は全然理解できていないですが・・
見ているだけでもインスピレーションが刺激されると思いますので是非。