jquery 140522
DESCRIPTION
第５回 HTML5ビギナーズでの登壇資料となりますTRANSCRIPT
jQuery応用2014/05/23
自己紹介
名前 杉山 彰啓（スギヤマ アキヒロ）
経歴 ・独立系企業就職しロボットの研究・デジハリ生となり、在学期間に退職・UI/UXを専門のデザイン会社へ就職・デジハリの講師のオファーを受け会社を退職 デジタルハリウッド ソーシャルアプリクリエイター専攻
・フリーランスとなる・inopを立ち上げる・inopを辞める・もう一度フリーランスの道へ
応用！！
masonry
masonryのお話をする前に
今のサイトの流行というのはどういったサイトがあるのか？
独自で書かれているサイト
http://fes.tokyo-motorshow.com/
canvasを使用したサイト
http://panasonic.jp/shaver/lamdash/dna/index.html
SVGを使用したサイト
http://dentetsu.hankyu.co.jp/jinji/employment/
作ってみると要素が縦長だたりしてキレイに見えなかったりします
masonry
masonry環境の準備
ライブラリーのダウンロード
jQuery:ライブラリー
masonry：ライブラリー
２つを用意します
http://masonry.desandro.com/
http://jquery.com/
masonry環境の準備
ライブラリーのダウンロード
jQuery:ライブラリー
masonry：ライブラリー
２つを用意します
http://masonry.desandro.com/
http://jquery.com/
masonry環境の指定
ライブラリーのパスを指定
<script src="js/masonry.pkgd.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
masonry環境の指定2
masonryの動作指定
$(function(){ $('#container').masonry({ itemSelector: '.box', columnWidth: 200 });});
itemSelector: masonryを使いたいclass名を指定しますcolumnWidth: 一列の幅を指定
masonry環境の指定3
masonryのオプション
・一列の幅サイズ：columnWidth: 数値・スムースアニメーション設定：isAnimated: false又true ・親要素の幅サイズがピッタリ：isFitWidth: false又true・整理される要素の左右逆になる：isOriginLeft: false又true・整理される要素の上下が逆になる：isOriginTop: false又true・整理される要素間の溝の幅を指定 ：gutter: 数値・親要素にスタイルを追加できる： containerStyle: { スタイル }・ウィンドウサイズが変更された時に並び替え：isResizable: false又true
masonry注意事項
masonryを使用して画像ギャラリーつくった場合画像の読込みのタイミング遅かったりするとレイアウトが崩れてしまう時があります
画像をローディングしてあと実行してくるスクリプトを実行する必要がでてきます
masonry注意事項
imagesloaded
https://github.com/desandro/imagesloaded
masonry環境の指定復習
masonryの動作を以下のように指定をしていました
$(function(){ $('#container').masonry({ itemSelector: '.box', columnWidth: 200 });});
masonry環境の指定プラスα
masonryの動作指定$(function(){ $('#container').imagesLoaded(function(){ $('#container').masonry({ itemSelector: '.box', columnWidth: 200 }); });});
imagesLoadedでローディングが完了した後にmasonryを指定させてあげます
今回のおさらい
・最近の流行について
・masonryについて
最後にちょっとしたものを作ってみました
ご清聴ありがとうございました