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); });