WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

要素をグリッド状に配置してくれる「jQuery Masonry」

グリッドに沿って各要素をレンガ状にレイアウト出来る「Masonry」、ウィンドウサイズが変わった際のアニメーションなども含まれていて、初心者の方でも比較的簡単に導入でき、カスタマイズも容易に出来るのでぜひ使ってみましょう。

http://masonry.desandro.com/

f:id:yachin29:20160201044804j:plain

今回はそれに方向別に動きのあるホバーアニメーションを付けてみましょう。
index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Masonry</title>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/sample.js"></script>
<script src="js/masonry.pkgd.js"></script>
<script>
jQuery.event.add(window,&quot;load&quot;,function(){ //画像の読み込みが終わってからイベント開始
  $('#container ul').masonry({ //親要素のクラスを指定
    itemSelector: '.box', //動く要素のclassを指定
    columnWidth: 160, //一列の幅サイズを指定
    isAnimated: true, //スムースアニメーション設定
    isFitWidth: true, //親要素の幅サイズがピッタリ
    gutterWidth: 0,   //整理される要素間の溝の幅を指定
    containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる
    isResizable: true //ウィンドウサイズが変更された時に並び替え
  });
});
</script>
</head>

<body>
<div id="container">
<ul class="masonry">
<li class="box"><a href="#"><img src="img/logo01.png" alt="#">
<div class="overlay sizeL">
<h2>見出し</h2>
<p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>

<li class="box"><a href="#"><img src="img/ph05_my.jpg" alt="#">
<div class="overlay sizeM">
 <h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</a></li>

<li class="box"><a href="#"><img src="img/ph07_s.jpg" alt="#">
<div class="overlay">
<h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>


<li class="box"><a href="#"><img src="img/ph10_s.jpg" alt="#">
<div class="overlay">
<h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>

<li class="box"><a href="#"><img src="img/ph25_my.jpg" alt="#">
<div class="overlay sizeM">
<h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>

<li class="box"><a href="#"><img src="img/ph16_s.jpg" alt="#">
<div class="overlay">
<h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>

<li class="box"><a href="#"><img src="img/ph17_s.jpg"  alt="#">
<div class="overlay">
<h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>

<li class="box"><a href="#"><img src="img/ph08_my.jpg" alt="#">
<div class="overlay sizeM">
<h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>

<li class="box"><a href="#"><img src="img/ph12_s.jpg"alt="#">
<div class="overlay">
<h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
<div class="view">VIEW</div>
</div>
</a></li>
</ul>
</div>
</body>
</html>

スタイルシート

@charset "utf-8";
/* CSS Document */

html, body, header, nav, h1, ul, li, img, p, small, a, section, footer {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
ul {
  list-style: none;
}
a {
	text-decoration: none;
  color: #222;
}
img {
  border: none;
  vertical-align: bottom;
}

/*IE8用リセット*/
 article, aside, dialog, figure, footer, header,
  hgroup, menu, main, nav, section { display: block; }
  
  
#container {
  max-width: 800px; /*Masonry用にmax-widthを指定*/
  margin: 50px auto 0;
}
ul.masonry {
  overflow: hidden;
  margin: 0 auto;
}
li {
  float: left;
  margin: 10px;
  overflow: hidden;
}


/*ホバーアクションの記述*/
.overlay {
  position: absolute;
  width: 140px;
  height: 140px;
  background: rgba(255, 255, 255, 0.6);
}
.sizeL{
  position: absolute;
  width: 300px;
  height: 300px;
}
.sizeM {
  position: absolute;
  width: 300px;
  height: 140px;
}
h2 {
  font-size: 20px;
  text-align: center;
  margin: 15px 0;
}

.sizeL h2 {
  font-size: 34px;
  text-align: center;
  margin: 40px 0;
}
p {
  font-size: 12px;
  margin-bottom: 20px;
  padding: 0 10px;
  text-align: center;
}
.sizeL p {
  font-size: 18px;
}

.view{
	border:1px solid white;
  border-radius: 4px;
	padding:5px 0;
	width:60%;
  margin: 0 auto;
  text-align: center;
	margin-top:10px;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.sizeL .view{
	border:1px solid white;
	padding:10px 0;
	width:60%;
  margin: 0 auto;
  text-align: center;
	margin-top:30px
  
}
.view:hover{
	background-color:white;
	color: #333;
  cursor: pointer;
}


ホバーアクション用のスクリプト

// JavaScript Document


$(function(){
	$('.overlay').each(function() {
        $(this).css({
            top:$(this).closest('.box').height(),
            width:$(this).closest('.box').width(),
            height:$(this).closest('.box').height()
        });
    });
	
	var hoverHandler = function(e) {
		var isMouseEnter = e.type === 'mouseenter',
		$box = $(this),
		$overlay = $('.overlay', $box),
		overlayW = $overlay.width(),
		overlayY = $overlay.height(),
    baseDegree = Math.atan2(overlayY, overlayW) * 180 / Math.PI,
		mouseX = e.clientX - ($box.offset().left + overlayW / 2),
		mouseY = e.clientY - ($box.offset().top + overlayY / 2),
		degrees = Math.atan2(mouseY, mouseX) * 180 / Math.PI,
		style = {};

		if (degrees > -180 + baseDegree && degrees <= -baseDegree) {
			style.top = -overlayY;
			style.left = 0;
		} else if (degrees > -baseDegree && degrees <= baseDegree) {
			style.top = 0;
			style.left = overlayW;
		} else if (degrees > baseDegree && degrees <= 180 - baseDegree) {
			style.top = overlayY;
			style.left = 0;
		} else {
			style.top = 0;
			style.left = -overlayW;
		}
        
		$overlay
		.css({
			top: isMouseEnter ? style.top : 0,
			left: isMouseEnter ? style.left : 0,
		  backgroundColor: '#' + Math.floor( Math.random() * 0xFFFFFF ).toString( 16 ) //ホバーした時の背景色
			
		})
		.stop(true)
		.animate( {
			top: isMouseEnter ? 0 : style.top,
			left: isMouseEnter ? 0 : style.left
		}, 100);
	};

	$('.box')
	.on('mouseenter', hoverHandler)
	.on('mouseleave', hoverHandler);
});