マウスオーバーや画像表示の工夫
2012.08.29
コーディングをする際にできるちょっとした工夫をメモ。

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

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

サンプル


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

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

サンプル


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

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

サンプル


| コメント(0)
JS:スマホサイトのURLから、PCサイトのURLを取得
2012.08.15
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使わない方は書き換えてみてください。
| コメント(3)
使いやすそうなローディングアニメgif
2012.08.08
以前ローディングアニメgifのジェネレータについて書きましたが、
こちらで配布されているアニメーションgifにも同じくらいお世話になっています。

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

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

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

今後も多用しそうな素材集です。
| コメント(0)
Photoshopでレイアウトする際に便利なスクリプト&エクステンション
2012.08.01

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

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

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

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

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

| コメント(0)
カッコイイ 3D Flashサンプルサイト
2012.08.01
■ClockMaker Labs
http://clockmaker.jp/labs/

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

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

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

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