読者です 読者をやめる 読者になる 読者になる

Webデザイン初心者向けのあれこれ

Webデザイン初心者向けのあれこれを書いていきます。

jQueryの可能性は無限大!?プラグインまとめ番外編

JavaScript

どうもこんばんは、僕です。

今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編?と言った感じです。
一応今までのプラグインまとめ記事はこちらです。

・ひと工夫でこんなことも!ユニークなjQueryプラグイン5つ集めてみました

・すっごい動くよ!テキストをアニメーションさせるjQueryプラグイン集めてみた

・今更ながらみんな大好き(?)「lightbox」プラグインを集めてみました

・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた



jquery-tubular
http://code.google.com/p/jquery-tubular/

f:id:webarekore:20130208233539p:plain


ページの背景にYouTubeの動画を指定することができます。
背景を考える幅が広がるのではないでしょうか。


jquery.snipe
http://rayfranco.github.com/jquery.snipe/

f:id:webarekore:20130208233555p:plain


マウスオーバーで画像の一部を拡大することができます。
各所で画像の一部を拡大するプラグインが使われていますが、jquery.snipeはその一例ですね。


・lenticular.js
http://lenticular.attasi.com/

f:id:webarekore:20130208233558p:plain


スマートフォンを傾けて画像を回転させることができます。
PC版ではマウスの動きで画像が動きます。


・Baraja
http://tympanus.net/codrops/2012/11/13/baraja-a-plugin-for-spreading-items-in-a-card-like-fashion/

f:id:webarekore:20130208233609p:plain


カードゲームの手札のようなパネルの動きを実装することができます。
口で説明するのは難しいので、ぜひデモを見てみて下さい。


・Real Shadow
http://indamix.github.com/real-shadow/

f:id:webarekore:20130208233616p:plain


マウスを基準とした影を付けることができます。
影はマウスを動かすことでアニメーションします。

 

 

いかがでしたでしょうか?

べ、別に記事のネタに困って必死こいて探したわけじゃないからね!

こういったプラグインを見ると、本当にjQueryの可能性は無限大なのではないかというように感じます。

僕もWebデザイナーを目指している身として、jQueryをバリバリ使いこなせるようになりたいです。

それではこのへんで…。

これでバレンタインも怖くない!? バレンタインのWebサービスを活用しよう!

アプリ Webサービス

もうすぐバレンタインですね。

ソワソワしだす方も多いのではないでしょうか?

本命とまではいかなくとも、義理チョコくらいは…と考えている男性の方も多いはず。

 

しかしながら、「バレンタイン事情2013」調査では、

バレンタインデーにチョコレートをあげる人は?という質問に対して、

 

1位 「 女友達 」 ( 68.5% )    

2位 「 父親 」 ( 44.3% )    

3位 「 彼氏 」 ( 38.0% ) 

 

という、なんとも厳しい結果に…。

どうやら時代は告白の日というよりは、チョコレートで友達とコミュニケーションをとる日となりつつあるようです。

「バレンタイン事情2013」調査では、チョコで交流を図ることを「チョコミュニケーション」なんて言ったりしています。

 

それでもチョコレートがほしい…義理チョコ1つももらえないバレンタインなんて…。

という方のために、今日はいくつかWebサービスを紹介したいと思います。

 

■男性編

 

1.バレンタイン保険

f:id:webarekore:20130204114540p:plain

バレンタインチョコを確実に回避できる!という言葉が何とも魅力的なサービス。

谷合りえ子さんという女性から、チョコと直筆の手紙が当日に届くそうです。

保険料として500円かかるそうですが、どうしても欲しいという方は試す価値あり?

 

尚、申込み多数で谷合さんが腱鞘炎寸前とのことで、2月7日で終了との事。

チョコレートが貰える予定がない方は7日までに申し込みを!

 

2.Sumally

f:id:webarekore:20130204115343p:plain

時代はソーシャルバレンタイン!

SumallyというSNSを使って、女性にアイテムをおねだりしてみませんか?

三越伊勢丹×Sumallyのコラボ限定オンラインショップ、「DISCOVER !!!!! LOVE VALENTINE ONLINE SHOP」ではTwitterfacebookのアカウントを使用して、「want it」でおねだりしちゃおうという企画です。

 

f:id:webarekore:20130204120436p:plain

 

▲「want it」がほしい! 「have it」が持ってるよ、という意味。

 

 

want it」したものは、Sumally上で共有されるので、うまくいけば欲しいものをもらえちゃうかもしれませんね。

意中の女子にバレンタインチョコをねだれる!?「ソーシャルバレンタイン×Sumally」という記事で詳しく解説してくださっているので、興味のある方は是非登録してみてくださいね。

 

 

■ 女性編

 

世の中にはあなたの義理チョコをまっている男性も多いのです…。

と、いうわけで気軽に義理チョコ(?)を送れるものも紹介します。

 

1.マイブラックサンダー

f:id:webarekore:20130204120809p:plain

facebookのアカウントを利用して、男性にブラックサンダーが描かれたメッセージカードを送れるアプリです。

あくまでメッセージカードですので、下手をすると男性に大打撃を与えかねないので注意が必要かも?

これと一緒に、是非チョコレートも送ってあげてくださいね。

 

 

皆さんが楽しいバレンタインを過ごせますように。

 

 

 

関連記事

バレンタインまで一か月! チョコっと可愛いWebサイト

 

Flashじゃないんだぜコレ…HTML5+CSS3で書かれた驚きのサイト7つ

HTML CSS デザイン

早いもので年が明けて1か月が経ちました。春はまだ遠いと思っていましたが少し暖かくなってきたような気もします。

 

来年に正式勧告が予定されているHTML5ですが、既に世の中にはHTML5を駆使したサイトがたくさんあります。

今日は「HTML5+CSS3で書かれた一瞬Flashと見間違うようなサイト」をご紹介します。  

 

ウェブの進化 

http://www.evolutionoftheweb.com/ 

f:id:webarekore:20130203182712j:plain

すごい上に勉強になるサイトです。

ブラウザの歴史とインターネットの歴史。さらに画面の明度を変えたり、ズームイン/アウトも出来ちゃいます。

 

 

Mr.doob

http://mrdoob.com/92/Google_Gravity_HTML5

f:id:webarekore:20130203182754j:plain

かつてFlashのActionScriptで高度なインタラクティブな実験サンプルを公開していた方のHTML5実験サイトです。

あのGoogleがめちゃくちゃになったり、ソリティアのアレが延々と現れたり……一見の価値アリです。

 

 

ROXIK 

http://roxik.com/mona/ 

f:id:webarekore:20130203182828j:plain

モナリザと写楽の顔を引っ張ることができるサイトです。

3DSのプリセットゲームにこんなんあったな……。

 

 

Form Follows Function 

http://fff.cmiscm.com/#!/main 

f:id:webarekore:20130203182922j:plain

HTML5とCSS3の実験的サンプルがてんこもりなサイト。ブラウザによってはちょっとカクカクしてしまうようですが……。動きや色使いがとても素敵です。

個人的にはPlant Treesがお気に入り。

 

 

Beercamp 2012 

http://2012.beercamp.com/ 

f:id:webarekore:20130203183036j:plain

CSS3で書かれた立体絵本です。

マウスでホールドしながら本をめくるように動かすと……。絵柄もポップで可愛らしいです。

 

 

 Agent 008 Ball

http://agent8ball.com/ 

f:id:webarekore:20130203183121j:plain

HTML5+CSS3で書かれたビリヤードゲームです。玉を飛ばす方向を決めたらマウスで打つ強さを調節することができます。

かなり遊べます。私は気づいたら30分ほど夢中になっていました……。

 

 

The Shodo 

http://www.theshodo.com/ 

f:id:webarekore:20130203183557j:plain

その名の通りWeb上で書道が体験出来るサイトです。最初にSNS等のサインインを求められますが、登録をしなくても遊べます。BGMがいい感じ。

硯で墨汁の色や濃さを、筆で太さを選べます。かなり本格的で、出来た書はSNSで投稿することも出来ます。

 

いかがでしたでしょうか。

 Flashじゃないの? ウソだろ……と思わず言いたくなるサイトばかりだったと思います。

正直、私はソースコードを見ても何が起こっているのかサッパリですが……いつかこんなサイトを制作してみたいものですね。 

ひと工夫でこんなことも!ユニークなjQueryプラグイン5つ集めてみました

HTML JavaScript CSS

どうもこんにちは、僕です。

皆さんも大分お世話になっていると思われるjQuery
今日はそのjQueryを使ったユニークなプラグインを紹介してみます。


1.wScratchPad
http://www.websanova.com/plugins/scratchpad

f:id:webarekore:20130201043707p:plain

スクラッチ機能を実装できるプラグインです。
スクラッチ部分の色や画像の指定、更にはカーソルにコインを使うことができます。
また、どれくらい削ったのかをパーセント表示してくれる機能も搭載しています。


2.oriDomi
http://oridomi.com/

f:id:webarekore:20130201043716p:plain


要素を折り紙のように折りたたむことが出来るプラグインです。
折り数や向き、折り幅などの指定が出来るようです。


3.Cheat Code
http://www.trovster.com/lab/plugins/cheat-code/

f:id:webarekore:20130201043724p:plain


キーコマンドを実装できるプラグインです。
例えば、上上下下左右左右BA(所謂コナミコマンド)という順番でキーを押すとメッセージが表示される、といった機能の実装が出来ます。


4.Eight-Bit.js
http://eightbit.2721west.com/eightbit.html

f:id:webarekore:20130201043731p:plain


昔懐かしいファミコンのようなドット絵を描画することが出来るプラグインです。
描画ツールが同時に公開されていて、ツールを使って描いたドット絵をコードに変換してくれます。


5.jqFloat.js
http://www.inwebson.com/jquery/jqfloat-js-a-floating-effect-with-jquery/

f:id:webarekore:20130201043829p:plain


要素を浮遊しているように表示することの出来るプラグインです。
例えば、雲の画像を浮かんでいるように表示させることが出来ます。
サンプルデモより「気球をクリックすると上昇し、プカプカ浮かぶ」といった動きも可能です。

 

 

いかがでしたでしょうか。

一昔前まではこういった動きの実装にも相当な苦労があったと思います。

今ではjQueryとプラグインで簡単に実装できてしまうので、技術の進化というものは本当にすごいと思いました。

(なんだか小学生の感想文みたいな締め方になってしまいました)

それではこの辺で…

今話題の第二回全国統一HTML5実力テスト(応用編)を受けてみた!

JavaScript HTML

前回紹介しました

今話題の第二回全国統一HTML5実力テストを受けてみた!

http://t.co/kA5Q2kNM

 

応用編が本日リリースしました。

f:id:webarekore:20130130194859j:plain

 jsdo.it

第二回全国統一 HTML5実力テスト - jsdo.it - Share JavaScript, HTML5 and CSS

http://jsdo.it/event/html5cat/2012/autumn/

前回の結果は81点で、神コーダ―という称号もいただきました。

応用編ということで教材で少し勉強しちゃいました(笑)

 

いざ、チャレンジ!!

 

f:id:webarekore:20130130202847j:plain


今回は答えを空白にドラッグ&ドロップで解答していきます。

 

 

流石応用編だ

なかなかやりますな(・Θ・;)アセアセ…

 

では結果です。

f:id:webarekore:20130130203425j:plain

 

79点でした。(:_;)

 

3番の問題全部間違ってるし・・・・・・

見なかった事にして下さい(笑)

今回はランキング機能もついていて

自分が全体で何位なのかも知ることが出来ます。

 

称号は「できすぎ大人コーダ―」でした。

 前回は神コーダ―だったので

神から人間に戻りましたとさ・・・・・・

 

f:id:webarekore:20130130203945j:plain

 

最後に表示された画面何かと思ったら

なんとスカウトされました。

DeNA

http://dena.jp/

高得点者は採用フォームにエントリーできるみたいですね。

神コーダ―はlet'sエントリーです。

 

感想

テストを受けるのはWebデザイン技能検定ぶりだったので

いい刺激になりました。

コーディング中にあれっなんの要素?だっけと思う事が最近

多くなってきたので、勉強するきっかけになりました。

定期的にテストを行ってくれると、とてもありがたいですね。

 

とても楽しめて、学べる

HTML5実力テスト

是非貴方も挑戦してみて下さいね。