グリッドに沿って各要素をレンガ状にレイアウト出来る「Masonry」、ウィンドウサイズが変わった際のアニメーションなども含まれていて、初心者の方でも比較的簡単に導入でき、カスタマイズも容易に出来るのでぜひ使ってみましょう。
http://masonry.desandro.com/
今回はそれに方向別に動きのあるホバーアニメーションを付けてみましょう。
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,"load",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); });
