WEBサイト制作の勉強

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

フェリカテクニカルアカデミー

マウスホバーした進入方向からオーバーレイ要素がスライドしてくるjQuery

f:id:yachin29:20150610100407p:plain

http://yachin29.html.xdomain.jp/sample2.html


参考サイト
wiseyeti.co.ukwiseyeti.co.uk



index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>無題ドキュメント</title>
<link rel="stylesheet" href="css/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>
  $(function(){
   
  $('#container').masonry({ //親要素のクラスを指定
    itemSelector: '.box', //整理される要素のclassを指定
    columnWidth: 188, //一列の幅サイズを指定
    isAnimated: true, //スムースアニメーション設定
    isFitWidth: true, //親要素の幅サイズがピッタリ
    gutterWidth: 0,   //整理される要素間の溝の幅を指定
    containerStyle: { position: 'relative' }, //親要素にスタイルを追加できる
    isResizable: true //ウィンドウサイズが変更された時に並び替え
  });
   
});
</script>
</head>

<body>
<div id="container">
<ul id="wrapper">
<li class="box size-2x2" id="box1">
 <div class="overlay overlay1">
 <h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>
  
<li class="box size-2x1" id="box2">
 <div class="overlay overlay2">
 <h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>
  
<li class="box" id="box3">
 <div class="overlay overlay3">
 <h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>
  
<li class="box" id="box4">
 <div class="overlay overlay4">
 <h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>

<li class="box size-2x1" id="box5">
 <div class="overlay overlay5">
 <h2>見出し</h2><p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>
  
<li class="box" id="box6">
 <div class="overlay overlay6">
 <h2>見出し</h2>
 <p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
</div>
</li>

<li class="box" id="box7">
 <div class="overlay overlay7">
 <h2>見出し</h2>
 <p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>

<li class="box size-2x1" id="box8">
 <div class="overlay overlay8">
 <h2>見出し</h2>
 <p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>

<li class="box" id="box9">
 <div class="overlay overlay9">
 <h2>見出し</h2>
 <p>テキスト・テキスト・テキスト</p>
  <div class="view">VIEW</div>
 </div>
</li>
</ul>
</div>
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}
 article, aside, dialog, figure, footer, header,
 main, menu, nav, section { display: block; }
img {
  max-width: 100%; /*フルードイメージ*/
}
body {
    max-width: 960px;
    margin: 0 auto;
}
#container {
  margin: 0 auto;
  position: relative;
  padding-top: 9px;
}
#wrapper {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
}
.box {
  float: left;
  position: relative;
  margin: 9px;
  overflow: hidden; 
}
#box1 {
  width: 357px;
  height: 357px;
  background:url(../img/01-l.png) no-repeat;
}
#box2{
  width: 357px;
  height: 170px;
  background:url(../img/02-m.png) no-repeat;
}
#box3{
  width: 170px;
  height: 170px;
  background:url(../img/03-s.png) no-repeat;
}
#box4{
  width: 170px;
  height: 170px;
  background:url(../img/04-s.png) no-repeat;
}
#box5{
  width: 357px;
  height: 170px;
  background:url(../img/05-m.png) no-repeat;
}
#box6{
  width: 170px;
  height: 170px;
  background:url(../img/06-s.png) no-repeat;
}
#box7{
  width: 170px;
  height: 170px;
  background:url(../img/07-s.png) no-repeat;
}
#box8{
  width: 357px;
  height: 170px;
  background:url(../img/08-m.png) no-repeat;
}
#box9{
  width: 170px;
  height: 170px;
  background:url(../img/09-s.png) no-repeat;
}
.overlay {
  position: absolute;
  width: 170px;
  height: 170px;
  background: rgba(255, 255, 255, 0.6);
}
.overlay-2x2 {
  position: absolute;
  width: 357px;
  height: 357px;
}
.overlay-2x1 {
  position: absolute;
  width: 357px;
  height: 170px;
}

h2 {
  font-size: 20px;
  text-align: center;
  margin: 20px 0;
}

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

.view{
	border:1px solid white;
  border-radius: 5px;
	padding:8px 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;
}
.size-2x2 .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;
}
sample.js
$(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);
});