フィルタリング

特定の要素のみまたは組み合わせで、該当するもののみを表示します

MixItUp

f:id:web-design-lesson:20160618120913p:plain

プラグインをダウンロード

f:id:web-design-lesson:20160618131244p:plain

フィルタリング機能を実装

追い込みのアニメーション

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MixItUp</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-2.2.4.min.js"></script>
<script src="jquery.mixitup.min.js"></script>
<script>
$(function(){
	$('#grid').mixitup();
});
</script>
</head>
<body>
<div id="container">
<h1>MixItUp</h1>
<ul id="controls">
<li class="filter" data-filter=".all">Show All</li>
<li class="filter" data-filter=".red">red</li>
<li class="filter" data-filter=".yellow">yellow</li>
<li class="filter" data-filter=".blue">blue</li>
<li class="filter" data-filter=".gray">gray</li>
<li class="filter" data-filter=".yellow, .blue">yellow &amp; blue</li>
</ul>
<ul id="grid">
<li class="mix red">1</li>
<li class="mix yellow">2</li>
<li class="mix gray">3</li>
<li class="mix yellow">2</li>
<li class="mix blue">3</li>
<li class="mix red">1</li>
<li class="mix blue">3</li>
<li class="mix red">1</li>
<li class="mix gray">1</li>
<li class="mix blue">3</li>
<li class="mix yellow">2</li>
<li class="mix gray">3</li>
</ul>
</div>
</body>
</html>

《style.css》

@charset "utf-8";

html, body, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}

#container {
  width: 95%;
  margin: 50px auto;
}
#grid>.mix {
display: none;
opacity: 0;
width: 160px;
vertical-align: top;
margin-bottom: 5px;
background: #000;
color: #fff;
font-size: 30px;
text-align: center;
line-height: 160px;
}
#grid>.red {
  background: #F87C7E;
}
#grid>.yellow {
  background: #EEEC77;
}
#grid>.blue {
  background: #7CC3F1;
}
#grid>.gray {
  background: #ADADAD;
}
#controls {
  overflow: hidden;
}
#controls>.filter {
  float:left;
  margin: 20px 10px;
  padding: 0 30px;
  line-height: 30px;
  box-sizing: border-box;
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 4px;
  text-align: center;
  color: #666;
  cursor: pointer;
  font-weight: bold;
}
#controls>.filter:hover {
  background: #7F7F7F;
  color: #FFF;
}

f:id:web-design-lesson:20160618204309p:plain

opacityを利用したフェード（プラグイン不要）

MixItUpと同じソースコードで実装
透過PNG画像を挿入します

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Q10</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div id="container">
<h1>Filtering</h1>
<ul id="controls">
<li class="filter" data-filter="all">Show All</li>
<li class="filter" data-filter="red">red</li>
<li class="filter" data-filter="yellow">yellow</li>
<li class="filter" data-filter="blue">blue</li>
<li class="filter" data-filter="gray">gray</li>
<li class="filter" data-filter="shirt">Shirt</li>
<li class="filter" data-filter="jacket">Jacket</li>
<li class="filter" data-filter="skirt">Skirt</li>
<li class="filter" data-filter="pants">Pants</li>
</ul>
<ul id="grid">
<li class="red skirt"><img src="img/skirt.png" alt=""></li>
<li class="gray jacket"><img src="img/jacket.png" alt=""></li>
<li class="yellow shirt"><img src="img/shirt.png" alt=""></li>
<li class="blue skirt"><img src="img/skirt.png" alt=""></li>
<li class="gray pants"><img src="img/pants.png" alt=""></li>
<li class="red shirt"><img src="img/shirt.png" alt=""></li>
<li class="blue shirt"><img src="img/shirt.png" alt=""></li>
<li class="yellow pants"><img src="img/pants.png" alt=""></li>
<li class="red jacket"><img src="img/jacket.png" alt=""></li>
<li class="gray shirt"><img src="img/shirt.png" alt=""></li>
<li class="yellow skirt"><img src="img/skirt.png" alt=""></li>
<li class="blue jacket"><img src="img/jacket.png" alt=""></li>
</ul>
</div>
</body>
</html>

《style.css》

@charset "UTF-8";

html, body, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
    font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul { list-style: none; }
img { border: none; vertical-align: bottom; }

body {
  font-size: 16px;
  font-family: Arial, sans-serif;
  background: #FFF;
}
#container {
  width: 94%;
  margin: 0 auto;
  text-align: center;
}
h1 {
  margin: 50px 0;
  color: #717171;
  font-size: 5em;
  font-weight: normal;
}
#controls {
  overflow: hidden;
}
#controls>.filter {
  float:left;
  margin: 10px 6px;
  padding: 0 25px;
  line-height: 30px;
  box-sizing: border-box;
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 4px;
  text-align: center;
  color: #666;
  cursor: pointer;
  font-weight: bold;
}
#controls>.filter:hover {
  background: #7F7F7F;
  color: #FFF;
}
#grid{
  padding-top:20px;
  overflow: hidden;
}
#grid>li {
  float:left;
  margin-right: 20px;
  margin-bottom:20px;
  width:150px;
  height:150px;
}
#grid>li.red{ background: #FFB8B9; }
#grid>li.blue{ background: #73CAFF; }
#grid>li.yellow{ background: #F3FA9B; }
#grid>li.gray{ background:#CCC; }

《script.js》

$(function(){
  $( '#controls>li' ).on('click', function(){
    var target = $(this).attr( 'data-filter' );
  $( '#grid>li' ).each(function(){
    // 一度全て非表示にする
    $(this).animate( { 'opacity' : 0 }, 300, function(){
      $(this).hide();
    // フィルタリングの条件を満たしているか判別
    if( $(this).hasClass( target ) || target == 'all' ){
        // 条件を満たしている場合は再表示
        $(this).show();
        $(this).animate( { 'opacity' : 1 }, 300 );
      }
    });
  });
  });
});

f:id:web-design-lesson:20160618222739p:plain

isotope

isotope プラグインを使ったフィルタリング

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>isotope</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-2.2.4.min.js"></script>
<script src="https://npmcdn.com/isotope-layout@3.0/dist/isotope.pkgd.js"></script>
</head>
<body>
<div id="container">
<h1>isotope</h1>
<ul id="controls">
<li class="filter" data-filter="*">Show All</li>
<li class="filter" data-filter=".red">red</li>
<li class="filter" data-filter=".yellow">yellow</li>
<li class="filter" data-filter=".blue">blue</li>
<li class="filter" data-filter=".gray">gray</li>
<li class="filter" data-filter=".yellow, .blue">yellow &amp; blue</li>
</ul>
<ul class="isotope">
<li class="mix red">1</li>
<li class="mix yellow">2</li>
<li class="mix gray">3</li>
<li class="mix yellow">2</li>
<li class="mix blue">3</li>
<li class="mix red">1</li>
<li class="mix blue">3</li>
<li class="mix red">1</li>
<li class="mix gray">1</li>
<li class="mix blue">3</li>
<li class="mix yellow">2</li>
<li class="mix gray">3</li>
</ul>
</div>
<script>
$(function(){
  $('.isotope').isotope({
  itemSelector: '.mix',
});
$('#controls>li').on('click', function(){
  $('.filter .current').removeClass('current');
  $(this).addClass('current');

  var selector = $(this).attr('data-filter');
  $('.isotope').isotope({
    filter: selector,
  animationOptions: {duration: 750, easing: 'linear', queue: false}
});
return false;
});

});
</script>
</body>
</html>

《style.css》

@charset "utf-8";

html, body, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
ul {
  list-style: none;
}

#container {
  width: 95%;
  margin: 50px auto;
}

.isotope>.mix {
  float: left;
  width: 160px;
  height: 160px;
  margin: 3px;
  background: #FFF;
  line-height: 160px;
  text-align: center;
  color: #fff;
  font-size: 30px;
}
.isotope>.red {
  background: #F87C7E;
}
.isotope>.yellow {
  background: #EEEC77;
}
.isotope>.blue {
  background: #7CC3F1;
}
.isotope>.gray {
  background: #ADADAD;
}
#controls {
  overflow: hidden;
}
#controls>.filter {
  float:left;
  margin: 20px 10px;
  padding: 0 30px;
  line-height: 30px;
  box-sizing: border-box;
  background: #FFF;
  border: 1px solid #CCC;
  border-radius: 4px;
  text-align: center;
  color: #666;
  cursor: pointer;
  font-weight: bold;
}
#controls>.filter:hover {
  background: #7F7F7F;
  color: #FFF;
}