第５回 HTML5ビギナーズでの登壇資料となります

1. jQuery応用
2014/05/23

2. 自己紹介
名前 杉山 彰啓（スギヤマ アキヒロ）
経歴 ・独立系企業就職しロボットの研究
・デジハリ生となり、在学期間に退職
・UI/UXを専門のデザイン会社へ就職
・デジハリの講師のオファーを受け会社を退職
デジタルハリウッド ソーシャルアプリクリエイター専攻
・フリーランスとなる
・inopを立ち上げる
・inopを辞める
・もう一度フリーランスの道へ

3. 応用！！

4. masonry

5. masonryのお話をする前に

6. 今のサイトの流行というのは
どういったサイトがあるのか？

7. 独自で書かれているサイト
http://fes.tokyo-motorshow.com/

8. ヘッダーを固定されているサイト
https://5jcup.org/

9. 画像フルサイズのサイト
http://vertdegris.jp/

10. videoタグを使用したサイト
http://school.dhw.co.jp/

11. canvasを使用したサイト
http://panasonic.jp/shaver/lamdash/dna/index.html

12. SVGを使用したサイト
http://dentetsu.hankyu.co.jp/jinji/employment/

13. パララックスを使用したサイト
http://sumikiri.jp/

14. グリットでデザインされたサイト
http://torideken.com/

15. グリットでデザインされたサイトに注目
http://bm.straightline.jp/

16. 作ってみると要素が縦長だたりして
キレイに見えなかったりします

17. masonry

18. masonry環境の準備
ライブラリーのダウンロード
jQuery:ライブラリー
masonry：ライブラリー
２つを用意します
http://masonry.desandro.com/
http://jquery.com/

19. masonry環境の準備
ライブラリーのダウンロード
jQuery:ライブラリー
masonry：ライブラリー
２つを用意します
http://masonry.desandro.com/
http://jquery.com/

20. masonry環境の指定
ライブラリーのパスを指定
<script src="js/masonry.pkgd.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

21. masonry環境の指定2
masonryの動作指定
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200
});
});
itemSelector: masonryを使いたいclass名を指定します
columnWidth: 一列の幅を指定

22. masonry環境の指定3
masonryのオプション
・一列の幅サイズ：columnWidth: 数値
・スムースアニメーション設定：isAnimated: false又true
・親要素の幅サイズがピッタリ：isFitWidth: false又true
・整理される要素の左右逆になる：isOriginLeft: false又true
・整理される要素の上下が逆になる：isOriginTop: false又true
・整理される要素間の溝の幅を指定 ：gutter: 数値
・親要素にスタイルを追加できる： containerStyle: { スタイル }
・ウィンドウサイズが変更された時に並び替え：isResizable: false又true

23. masonry注意事項
masonryを使用して画像ギャラリーつくった場合
画像の読込みのタイミング遅かったりするとレイ
アウトが崩れてしまう時があります
画像をローディングしてあと実行してくるスクリ
プトを実行する必要がでてきます

24. masonry注意事項
imagesloaded
https://github.com/desandro/imagesloaded

25. masonry環境の指定復習
masonryの動作を以下のように指定をしていました
$(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200
});
});

26. masonry環境の指定プラスα
masonryの動作指定
$(function(){
$('#container').imagesLoaded(function(){
$('#container').masonry({
itemSelector: '.box',
columnWidth: 200
});
});
});
imagesLoadedでローディングが完了した後に
masonryを指定させてあげます

27. 今回のおさらい
・最近の流行について
・masonryについて

28. 最後にちょっとしたものを作ってみました

29. ご清聴ありがとうございました