tommmmyの思う、WEB標準に準拠した(X)HTMLやCSS・デザイン・Mac・phpのTipsなど

www.flickr.com

Works

web creators 1月号にデザインを寄稿しました

wc_cover_97.gif

2009年11月29日に発売された、web creators 1月号にデザインを寄稿しました。

企画・文・スクリプト作成はtiny-studioの田中朋也さん。

jQuery特集で、ビーム光線(違うけど!)をどう表現していくかというところで、スケジュール一覧リストがカレンダーにフォーカスしていく様子を作成しました。

jQuery-Effect-Spectrum

軽く解説しておきます。

jQuery-Effect-Spectrumの導入

上記URLよりダウンロードしたZIPを解凍します。

本体はjquery-effect-spectrum.jsですが、jQueryとjQueryUIもあわせて必要。

さっそくコードに貼り付け、指定をします。

jQuery-Effect-Spectrumのカスタマイズ

実際にカスタマイズしていく。head内のスクリプトをいろいろ変えてみることで、発生源、ターゲット先、ビーム光線の色や太さ、スタイルなどカスタマイズが可能です。


$(document).ready(function(){
  $('h1').click(function(){
	$(this).effect('spectrum',{
	  dest: $('span'),
	  spCss: {
	    borderWidth: '1px',
	    borderStyle: 'solid',
	    borderColor: '#F00'
		}
	});
  });
});

この場合だと、「1pxで赤の実線が、h1をクリックすると、spanにとぶ」ということになります。

基本スタイルを実装したデモはこちら

実際に誌面で紹介されているものはもう少し複雑なものになりますが、場所によって線の色や太さは随時変えられますよっていうサンプルになります。

他にもいろんなjQueryのサンプルが載っていますので、ぜひ参考にしてみてください。

ちなみに…

細々とやっているtommmmyのライフログ、「tommmmyののぞきあな」では、今回は紹介されていませんが、mbMaskedGallery.jsというのを使って、画像に透明マスクをかけています。

元はMTから出力されるただの四角い画像なので、どうにかしてこれをふわふわに自動でできたらなと思っていたところへ力強い味方!と思って実装したわけです。

jquery mb.maskedGallery

が!

めちゃめちゃ重い!

ので、何か代替えを考えています…。

という、余談でした。

Tags: , , ,

by tommmmy at 2009-12-01-Tue 00:33 in Worksこのエントリーをはてなブックマークする このエントリーを含むはてなブックマーク

TrackBack(0)

TrackBack URI:

▲pageTop

Comments(9)

終極痩身 said...

美人豹:www.kanpocom.com/pro/meirenbao.html
超級脂肪燃焼弾:www.kanpocom.com/pro/FAT-BURNERS-3.html
終極痩身:www.kanpocom.com/pro/zhongjishousheng.html
御秀堂養顔痩身カプセル:www.kanpocom.com/pro/yxty.html
韓国痩身一号:www.kanpocom.com/pro/hanguoshou-575.html
アリ王:www.kanpocom.com/pro/ANTKING.html

at 2011-03-15-Tue 16:30

天天素 said...

ED治療:www.kanpoucom.com/energy/66.html
性器増大:www.kanpoucom.com/energy/23.html
K Y Jelly潤滑剤:www.kanpoucom.com/product/230.html
経口中絶薬ru486:www.kanpoucom.com/product/113.html
天天素:www.kanpoucom.com/product/58.html
曲美 通販:www.kanpoucom.com/product/25.html
曲美:www.kanpoucom.com/product/28.html
INVERMA:www.kanpoucom.com/product/315.html
中華牛鞭:www.kanpoucom.com/product/167.html

at 2011-03-15-Tue 16:31

男宝 said...

MaxMan:www.allkanpo.com/product/MaxMan.html
VigRx:www.allkanpo.com/product/VigRx.html
Supra PE:www.allkanpo.com/product/SupraPE.html
D10 媚薬:www.allkanpo.com/product/D10.html

狼1号:www.allkanpo.com/product/%E7%8B%BC1%E5%8F%B7.html
狼一号:www.allkanpo.com/product/%E7%8B%BC1%E5%8F%B7.html
三体牛鞭:www.allkanpo.com/product/%E4%B8%89%E4%BD%93%E7%89%9B%E9%9E%AD.html
Xing霸:www.allkanpo.com/product/Xing%E9%9C%B8.html
男宝:www.allkanpo.com/product/%E7%94%B7%E5%AE%9D.html
徳国 増大宝V12:www.allkanpo.com/product/増大宝V12.html狼1号:www.allkanpo.com/product/%E7%8B%BC1%E5%8F%B7.html
狼一号:www.allkanpo.com/product/%E7%8B%BC1%E5%8F%B7.html
三体牛鞭:www.allkanpo.com/product/%E4%B8%89%E4%BD%93%E7%89%9B%E9%9E%AD.html
Xing霸:www.allkanpo.com/product/Xing%E9%9C%B8.html
男宝:www.allkanpo.com/product/%E7%94%B7%E5%AE%9D.html
徳国 増大宝V12:www.allkanpo.com/product/増大宝V12.html

at 2011-04-15-Fri 16:38

UGG ブーツ said...

天候は徐々にすぐに自分自身にいくつかの良, UGG ブーツ,それを準備する服だけでなく、ハンサムと破線,UGG ブーツ 販売,多くの気質より細く独特の美しさがもっと,UGG 店舗,美しいファッションクリスチ,UGG ブーツ 激安の宝石類を身に着けて.UGG クラシックミニ,UGG キッズ,UGG 手袋,UGG ベビーブーツ,UGG バッグ,ジミー チュウ 靴,Christian Louboutin Chaussures

at 2011-10-24-Mon 11:19

トリーバーチ 靴 said...

http://www.syuzu.com/tory-burch-purses/ トリーバーチ 長財布

at 2011-11-08-Tue 14:13

小林 千代 said...

お洒落商品のコンビニストア
お洒落商品って、贅沢な物ではないでしょうか簡単にそう思われます。贅沢な物ではなく、自分で出せる値段で良い質商品を手に入れて、ぴったり身元に、皆様にこう言うものを探して見ませんか?弊店はブランド腕時計、財布、バッグ。純チタン、タングステン、セラミック素材の人気アクセサリー(指輪、ネックレス、ブレスレット、イヤリング)品たっぷりなので、便利です。良い品質、全部手頃な値段で買えます。
一度ご来店してみませんか?
niceshop312@yahoo.co.jp
http://www.niceshop-online.com

at 2013-05-25-Sat 15:29

紅蜘蛛 said...

巨人倍増:www.yahookanpou.com/product/jurenbeizenggouqi.html
巨人倍増:www.yahookanpou.com/product/jurenbeizenggouqi.html
巨人倍増:www.yahookanpou.com/product/jurenbeizenggouqi.html
巨人倍増:www.yahookanpou.com/product/jurenbeizenggouqi.html
三體牛鞭:www.yahookanpou.com/product/santiniubian.html
三體牛鞭:www.yahookanpou.com/product/santiniubian.html
三體牛鞭:www.yahookanpou.com/product/santiniubian.html
三體牛鞭:www.yahookanpou.com/product/santiniubian.html
三体牛鞭:www.yahookanpou.com/product/santiniubian.html
三体牛鞭:www.yahookanpou.com/product/santiniubian.html
三体牛鞭:www.yahookanpou.com/product/santiniubian.html
三体牛鞭:www.yahookanpou.com/product/santiniubian.html
紅蜘蛛:www.yahookanpou.com/product/hzhzyd.html
紅蜘蛛:www.yahookanpou.com/product/hzhzyd.html
紅蜘蛛:www.yahookanpou.com/product/hzhzyd.html
紅蜘蛛:www.yahookanpou.com/product/hzhzyd.html
紅蜘蛛:www.yahookanpou.com/product/hzhzyd.html

at 2014-01-24-Fri 19:12

奇果 said...

威哥王:www.newtrendsshop.com/p250.html
巨人倍増:www.newtrendsshop.com/p2.html
三體牛鞭:www.newtrendsshop.com/p402.html
三体牛鞭:www.newtrendsshop.com/p402.html
勃動力三體牛鞭:www.newtrendsshop.com/p456.html
中絶薬RU486:www.newtrendsshop.com/c25.html
中絶薬RU486:www.newtrendsshop.com/c25.html
中絶薬RU486:www.newtrendsshop.com/c25.html
中絶薬RU486:www.newtrendsshop.com/c25.html
中絶薬RU486:www.newtrendsshop.com/c25.html
狼1号:www.newtrendsshop.com/p100.html
狼一号:www.newtrendsshop.com/p100.html
三便宝::www.newtrendsshop.com/p288.html
蟻力神:www.newtrendsshop.com/p128.html
蟻力神:www.newtrendsshop.com/p128.html
蟻力神:www.newtrendsshop.com/p128.html
奇果:www.newtrendsshop.com/p358.html
奇果:www.newtrendsshop.com/p358.html
奇果:www.newtrendsshop.com/p358.html
奇果:www.newtrendsshop.com/p358.html
奇果:www.newtrendsshop.com/p358.html

at 2014-01-24-Fri 19:13

new lawn collection said...

Great selections which are simple but very charming as they fit into the natural surroundings so well! Love the layering effect too which is so chic

at 2015-03-23-Mon 15:07

Post a Comment

▲pageTop

hands in handsとは?

"hands in hands"とは、もともと「手を携えて」という意味です。仕事をしていく上で、もっと言えば生きていく上で必ず必要な仲間、人の手。そのつながりを大切にしつつ、お仕事のアウトプットをしていくブログです。

search

  • 人気ブログランキング - hands in hands
  • このフィードをはてなRSSに追加する
  • テクノラティジャパンに追加する
  • powered by Movable Type3.34
  • Creative Commons License