今回はMasonryのギャラリーの画像にマウスのカーソルを乗せたときに青い半透明のアニメーションがでるようしてみました。
サンプルコードの実行結果はこちら
今回使用したプラグイン
・Mansonry
・imagesloaded
・colorbox
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
*{margin:0;padding:0;} ul li{list-style-type:none;} .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .pHeader{ background-color:white; margin:0 auto; width:100%; position:fixed; z-index:5; } .inner{ padding: 8px 10px; margin: auto; width:100%;} .main{ margin:0 auto; padding: 100px 10px; width:100%; } .filterForm{float:right;} .filterForm label{ font-weight:bold; cursor:pointer; margin-right:60px; padding:0 0.1em; -webkit-user-select:none; } label.ui-state.focus{outline:1px solid;} label .ui-icon{ background:url(img/sprites.png) no-repeat 0 0; width:17px; height:17px; margin-right:0.5em; margin-top:2px; vertical-align:top; display:inline-block; } .filterForm label.ui-state-active .ui-icon{ background-position:-20px 0; } .loadMore{ background-color:white; border:1px solid #f0f0f0; display:block; padding:1em 0; width:100%; margin-top:10px; } .galleryItem{margin-top:10px;} .galleryItem a{ display: block; /* 外側に配置された子孫要素は見えなくする */ overflow:hidden; position:relative; } .galleryItem .caption{ text-align:center; background-color: rgba(16, 32, 224, 0.5); color:white; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /* 親要素とおなじ大きさ */ width:100%; height:100%; position:absolute; top:100%; left:100%; } .title { display: block; font-saptionize: 18px; line-height: 1.2; } .date { display: block; font-family: "Georgia", serif; font-size: 12px; font-style: italic; line-height: 1.8; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; } |
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Masonryギャラリーにホバーしたときに、半透明のアニメーションをつけてみる</title> <script src="js/jquery-1.11.3.js"></script> <script src="js/ui/jquery-ui.js"></script> <link rel="stylesheet" href="style.css"> <script src="js/imagesloaded.pkgd.min.js"></script> <script src="js/masonry.pkgd.min.js"></script> <link rel="stylesheet" href="colorbox.css"> <script src="js/jquery.colorbox-min.js"></script> <script src="js/galleryFillterHoverEffect.js"></script> </head> <body> <header class="pHeader"> <div class="inner clearfix"> <h1><a href="#">Gallery Test</a></h1> <!-- 画像をフィルタリングするためのフォーム --> <form class="filterForm" id="galleryFilter"> <span class="formItem"> <input type="radio" name="filter" id="filterAll" value="all" checked> <label for="filterAll">All</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterUz" value="Uzbekistan"> <label for="filterUz">Uzbekistan</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterKy" value="kirgis"> <label for="filterKy">Kyrgis</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterKa" value="Kazakhstan"> <label for="filterKa">Kazakhstan</label> </span> <span class="formItem"> <input type="radio" name="filter" id="filterRu" value="Russia"> <label for="filterRu">Russia</label> </span> </form> </div> </header> <div class="main"> <ul class="gallery" id="gallery"></ul> <!-- 画像を追加で読み込むボタンを表示 --> <button class="loadMore" id="loadMore">More</button> </div> </body> </html> |
galleryFillterHoverEffect.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 |
$(function(){ $("#gallery").each(function(){ var $container = $(this), //追加ボタン $btnLoadMore = $("#loadMore"), //フィルタリングに使用するフォーム $filter = $("#galleryFilter"), //一度に表示する画像の数 itemNum = 4, //表示済の画像の数 doneNum = 0, //JSONデータを格納 arrData = [], //フィルタリングされたJSONデータを格納 filteredData =[]; $container.masonry({ columnWidth:230, gutter:10, itemSelector:".galleryItem" }); //JSONデータを取得し、initGallery関数を実行 $.getJSON("./data/content.json",initGallery); //ギャラリーを初期化 function initGallery(data){ //取得したJSONデータを格納 arrData = data; /* JSONデータを別の変数にも格納 フィルタリングされた際の データを保持するために使う */ filteredData = arrData; //まずは、アイテム(画像)リストを表示 addItem(); /* 追加ボタン「More」をクリックしたら アイテムリストを表示させるようにする */ $btnLoadMore.on("click",addItem); /* フィルターのラジオボタンが変更された filterItem関数を実行するように設定 */ $filter.on("change",'input[type=radio]',filterItem); /* 画像のリンクにホバーしたときの処理を登録する 第1引数: mouseenter マウスがのったとき mouseleave マウスが外れたとき 第2引数: マウスイベントが発生したリンク 第3引数: イベントが発生したときに、呼び出す関数 */ $container.on("mouseenter mouseleave", ".galleryItem a",hoverDiretion); } //アイテムリストを作成し、ドキュメントに挿入 function addItem(filter){ var arrElement =[], slicedData = filteredData /* slice()メソッド 配列から任意の要素を切り出した配列を返します。 第1引数:指定した番号の要素から 第2引数:指定した番号の「前」の要素まで slice(0,6)と書けば、配列1番目から6番目を返す。 */ .slice( doneNum , doneNum + itemNum ); //配列sliceDataの各要素ごとにDOM要素を作成 $.each( slicedData,function(i,item){ var itemHTML = '<li class="galleryItem isLoading">' + '<a href="' + item.images.large + '">' + '<img src="' + item.images.thumb + '" alt="">' + '<span class="caption">' + '<span class="inner">' + '<b class="title">' + item.title + '</b>' + '<time class="date" datatime="' + item.date + '">' + /* replace(" "," ")メソッド 第1引数:検索する文字列or正規表現のパターン 第2引数:置換する文字列 「/-0?/g」はitem.date内の 「-0」又は「-」という文字列を 「/」に置換します。 */ " " + item.date.replace(/-0?/g, '/') + '</time>' + '</span>' + '</span>' + '</a>' + '</li>'; /* itemHTMLに格納された文字列を jQueryオブジェクトに変換して get(0)メソッドでDOM要素として取り出す。 そして配列にっ格納する。 push()メソッド: 引数を配列の最後に格納する */ arrElement.push( $(itemHTML).get(0)); }); $container .append(arrElement) .imagesLoaded(function(){ $(arrElement).removeClass("isLoading"); $container.masonry("appended",arrElement); //フィルタリングの時は再配置する if( filter ){$container.masonry();} }); /* 今回はここから追加 addItem()関数でギャラリーのアイテムが ページに追加されたときに、そのアイテムからa要素を 選択して,colorboxメソッドを呼ばれるように設定 */ $container.find("a").colorbox({ maxWidth: "960px", maxHeight: "95%", title: function(){ return $(this).find(".inner").html(); } }); /* 今回はここまで追加 */ //追加済の画像の数を更新 doneNum += slicedData.length; /* 追加済みの画像の数と、フィルタリングされた 画像の数を比べている */ if( doneNum < filteredData.length ){ /* フィルタリングされた画像の数が多いなら Moreボタンを表示する */ $btnLoadMore.show(); }else{ $btnLoadMore.hide(); } } function filterItem(){ //チェックされたラジオボタンのvalue属性値を格納 var key = $(this).val(), masonryItem = //追加済アイテム $container.masonry("getItemElements"); //追加済アイテムを削除 $container.masonry("remove",masonryItem); /* フィルタリングされたアイテムと 追加済みの数値を格納している変数を初期化 */ filteredData =[]; doneNum = 0; if( key == "all" ){ /* all にチェックされている場合 全てのJSONデータを格納 */ filteredData = arrData; }else{ /* all以外にチェックがされている場合 キーと一致するデータを抽出 $.grep()メソッド 第1引数:検索対象の配列 第2引数:条件となる関数 */ filteredData = $.grep(arrData,function(item){ return item.category === key; }); } /* Masonryの再配置をするためにやる */ addItem(true); } function hoverDiretion(event){ var $overlay = $(this).find(".caption"), /* リンクに対してマウスがどの方向に出入りしたかを 調べ、方向を数値として返し、変数sideに格納 */ side = getMouseDirection(event), // スライドイン・アウトを格納 animateTo, //スライドイン終着 を格納 positionIn ={ top: "0%", left:"0%" }, /* マウスがaタグに入ってきた方向により、 そこから離れる時の、アニメーションを決定し その情報を変数positionOutに格納 */ positionOut = (function(){ switch( side ){ case 0: //top マウスが上から入ってきた return {top:"-100%",left: "0%"}; case 1: //right マウスが右から入ってきた return {top: "0%",left: "100%"}; case 2: //bottom マウスが下から入ってきた return {top: "100%",left: "0%"}; default://left マウスが左から入ってきた return {top: "0%",left:"-100%"}; } })(); if( event.type === "mouseenter"){ // マウスが入ってきた場合 animateTo = positionIn; $overlay.css( positionOut ); }else{ animateTo = positionOut; } $overlay.stop(true) .animate( animateTo,300,"easeOutExpo"); } /* マウスのイベントが発生したときの その方向を調査する */ function getMouseDirection(event){ var //イベントが発生した要素 $el = $(event.currentTarget), //HTML要素の左上を基準とした要素の位置を取得 offset = $el.offset(), //要素の幅と高さを取得 width = $el.outerWidth(), height = $el.outerHeight(), /* 引用:jQuery animation for a hover with "Mouse Direction" URL:http://stackoverflow.com/3647634 上記を踏まえて、下記の処理をすると 方向が数値として返されます。 */ x = (event.pageX - offset.left - width / 2 ) * (( width > height )? height / width: 1), y = (event.pageY - offset.top - height / 2 ) * (( height > width )? width / height: 1), direction = Math.round(((( Math.atan2(y,x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 ) % 4; return direction; } }); }); $(function(){ $('.filterForm input[type="radio"]').button({ icons: { /* ラジオボタンを変更しやすくするために class名を付すことができます。 */ primary: 'icon-radioBtn' } }); }); |