マウスストーカー

クライアントから、複数画像が慣性付きで追従するマウスストーカーを設置して欲しいという希望があったので、色々と調べて実装してみた。

ここを参考にした。
http://infoseek_rip.g.ribbon.to/iswebmag.hp.infoseek.co.jp/sample199.html

◆ javascript

var ix0=-30, iy0=-30;
var ix1=-30, iy1=-30;
var ix2=-30, iy2=-30;
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
function ImageMove() {
ix0=ix0+(mx-ix0)/10;
iy0=iy0+(my-iy0)/10;
ix1=ix1+(mx-ix1)/20;
iy1=iy1+(my-iy1)/20;
ix2=ix2+(mx-ix2)/30;
iy2=iy2+(my-iy2)/30;
img0.style.left = ix0 + “px”;
img0.style.top = iy0 + “px”;
img1.style.left = ix1 + “px”;
img1.style.top = iy1 + “px”;
img2.style.left = ix2 + “px”;
img2.style.top = iy2 + “px”;
setTimeout(“ImageMove()”,10);
}

◆ html

<body onload=”ImageMove()”>
<img id=”img0″ src=”01.jpg” style=”position:absolute; left:-30px; top:-30px;”>
<img id=”img1″ src=”02.jpg” style=”position:absolute; left:-30px; top:-30px;”>
<img id=”img2″ src=”03.jpg” style=”position:absolute; left:-30px; top:-30px;”>

で、こうなった。
http://yoshiyoshizamurai.com/pf/131214-01/01.html
※スマホやタブレットからでも、タップすれば動作を確認できます。

でも、スクロールするとストーカーの画像が置いて行かれる。

んー、マウスの座標値を取得して、その分を移動させれば良いかな。

ここを参考にした。
http://www.yoheim.net/labo/tips/getSeveralValue.html

◆ javascript

var ix0=-30, iy0=-30;
var ix1=-30, iy1=-30;
var ix2=-30, iy2=-30;
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
function ImageMove() {
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
ix0=ix0+(mx-ix0)/10;
iy0=iy0+(my-iy0)/10;
ix1=ix1+(mx-ix1)/20;
iy1=iy1+(my-iy1)/20;
ix2=ix2+(mx-ix2)/30;
iy2=iy2+(my-iy2)/30;
img0.style.left = scrollX + ix0 + “px”;
img0.style.top = scrollY + iy0 + “px”;
img1.style.left = scrollX + ix1 + “px”;
img1.style.top = scrollY + iy1 + “px”;
img2.style.left = scrollX + ix2 + “px”;
img2.style.top = scrollY + iy2 + “px”;
setTimeout(“ImageMove()”,10);
}

で、こうなった。
http://yoshiyoshizamurai.com/pf/131214-01/02.html

うん、いいね。

マウスストーカーは好き嫌いはあるだろうけど。

ちなみに実装したのはこのサイト。
http://fujitabo.co.jp/nozomikai/

作業用手袋

最近は仕事の記事を書く機会がほとんどなくなっていたので、少しは書いていこうと思う。

クライアントの依頼でYAHOO!オークションの設定。

Blog130124-01

良かったら買ってくれー。

http://page7.auctions.yahoo.co.jp/jp/auction/g123465423

http://page9.auctions.yahoo.co.jp/jp/auction/k156590714

http://page13.auctions.yahoo.co.jp/jp/auction/r98421748

派遣会社サイト。

先々月アップしたサイト。

内容の充実を検討しているので、厳密にはまだ制作途中ではあるが・・・

株式会社 フロックス

シンプルで、ユーザーから見て親しみやすい感じにして欲しいとの要望があったので、スタッフの写真を撮って、随所に使用した。

人物撮影の景観がほぼ皆無の私にとって、素人撮り及び修正の勉強にはなったが、もっと上手くできないものかとも思う。

レベルアップを図るにしても、今後の方策や方向性をもっと工夫していかねばなるまい。

精進精進。

リニューアル。

サイトをリニューアルした。

以前はブログ部分のみWordpressで構築し、ルート及びブログ以外は普通にhtmlで構成していた。

1年くらいその構成で運用してみたが、Wordpressで十分だし、その方が便利だという結論に達した。

で、

まずはサーバにいろいろとアップしていたので余分なファイルを整理した。

ルートがゴチャつくのは好まないし動かすのが面倒なので、Wordpress本体は専用のディレクトリに置いたままでルートに表示されるように設定した。

興味がある人もいるかも知れないので、参考までに・・・
↓↓↓
WordPress を専用ディレクトリに配置する

今回の機会に、各ページの中身も変えようと思っているので、まだ準備中のページも多い。

あと、白基調にしたいのだが、そのためには文字色や部品の調整も必要なので、まずはレイアウトを優先で調整なう。

栄助寿司様サイトアップ。

大阪府堺市にある栄助寿司様のサイトをアップ。

栄助寿司

今回は、私のサイトとほぼ同じ構造で作ってみた。

サイト内で使用している写真は、一部はお店の奥さんが撮ったものも使用しているが、ほぼ私が撮ったもの。

やはり、もう少し上位のカメラが欲しい・・・

ところで、このお店の松前寿司は、ハンパないく美味い。

個人的には炙ったもののほうが好み。

お寿司屋さんサイト

お寿司屋さんのサイト制作にとりかかる。

まずは来週、主なメニューの撮影。

先日打合せがてら食べたランチメニュー(大盛)。

鯖が特にうまいのだ。

今更ながらだが、WebやDTPの制作時に、
自分で素材用の写真を撮れるというのは、かなり便利である。

また昨今、ネットコンテンツの拡充や各種ソフトの発展などで、
専門的な教育を受けていなくても、
デザイン制作ができる人がどんどん増えている(私もその一人)。

もちろん、技術やセンスの差は歴然として存在するだが、それだけでは、
よほど突出していない限り、同業者との差別化が計れているとは言えなくなってきている。

そして、他と差をつけていくことが出来なければ、
運営していけるだけの仕事(もしくは報酬)を、得ることが出来ない時代となってきている。

そういった環境の中で、クライアントの支持を得るための付加サービスの一つとして、
スチールの撮影に関しては、今後は更に拡大していきたいと考えている。

・・・っとまあ、そんなに深く考えているわけでもないんだがw

人物撮影もやっていきたいんだよねー

だれかモデルやってくんねーかなぁ・・・ (´・ω・`)