UNIQLOCKのようなものを、jQuery UIを使って簡単に再現してみました。

1. HTML5ビギナーズ スタッフ
Taisuke Ozaki

2.  この資料は、2014年5月23日に行われた勉強会「HTML5ビ
ギナーズ」のLTに使用したものを基にしています。
 イベントページ：http://atnd.org/events/50016
 HTML5ビギナーズに参加された皆様の一助となれば幸い
です。
 サンプルのURLは非公開です。ごめんなさい！
 ご意見やご指摘は…
https://www.facebook.com/ozata92 にお願いします！

3. Taisuke Ozaki
 デジハリ卒業生
 HTML5ビギナーズ スタッフ
 文系大学生
 大学やアルバイトでの開発経験ゼロ
ozata92

4.  jQueryで「こんなのできるよ」という話
 プログラミングになじみの薄い方向け
 難しい・新しい技術を解説するのではなく、
「簡単！できそう！」を目指すLTです。

5.  UNIQLOCK(本家)
http://www.uniqlo.jp/uniqlock/

6.  制作時間：12時間程度
 使ったもの
 jQuery
 jQuery UI
 解説サイトにあるソースコード

7.  パーツ
 時計
 背景の色が変化 ←この処理を見ていきます！
 写真の表示
 jQuery UIの恩恵を受け、かなり楽に制作
 jQuery公式のライブラリ群。難しい動きを簡単に。
 2段階折りたたみ、バウンド、破片を作りながら爆発

8. $(function pAnime(){
$("#panel")
.delay(875)
.hide("slide", {direction: "up"}, 120)
.delay(875)
.show("slide", {direction: "left"}, 120)
.delay(875)
.hide("slide", {direction: "down"}, 120)
.delay(875)
.show("slide", {direction: "right"}, 120);
setTimeout(pAnime);
});

9. jQuery標準のhide/showメソッドは、
時間とコールバック関数しか設定できない。
スライド処理を書くのに手間がかかる。
$("#panel")
.hide(120)
.show(120);

10. オレンジ色の領域が上方向に消える
＝ オレンジの背景が白に変化して見える
$("#panel")
.hide("slide", {direction: "up"}, 120)

11. オレンジ色の領域が左方向から現れる
＝ 白の背景がオレンジに変化して見える
$("#panel")
.show("slide", {direction: “left"}, 120)

12. 一定時間後に自分を実行
＝ 繰り返しになる
setTimeout(pAnime,5000);

13. $(function pAnime(){
$("#panel")
.delay(875)
.hide("slide", {direction: "up"}, 120)
.delay(875)
.show("slide", {direction: "left"}, 120)
.delay(875)
.hide("slide", {direction: "down"}, 120)
.delay(875)
.show("slide", {direction: "right"}, 120);
setTimeout(pAnime);
});

14.  jQuery UIのSlideエフェクトを使うことで
簡単に、自由にスライド処理が可能！
 チェーンメソッドでつなぐ！
 setTimeout()で繰り返し処理

15.  「私ならもっとうまく作れるよ！」
→ ぜひ作ってみてください！
 「よくわからないけど、面白そう！」
→ ぜひ作ってみてください！
 「けしからん！モノ申したい！」
→ Facebookまでご意見をください！

16.  自分がワクワクするものを作る！
 探そう、答えはある。
 試行錯誤は時間のムダではない！
 再燃焼させたい時には勉強会へ！

17. 次はあなたの作品を！
ありがとうございました！