IE7対応!リストのホバーアニメーションソースサンプル(オーバーレイ編)
「次回はリストの上に要素が乗るオーバーレイ編をお送りしたいと思います。」と言いつつ早3ヶ月。。。
大変長らくお待たせいたしました。IE7対応のホバーアニメーションシリーズの第2弾をお送りいたします。
ちなみに第1弾はこちら
1.オーバーレイアニメーション(マウス位置判別)
function hoverDirection (event) { var $overlay = $(this).find('.overlayBox'), side = getMouseDirection(event), animateTo, positionIn = { top: '0%', left: '0%', opacity:0.7 }, positionOut = (function () { switch (side) { case 0: return { top: '-100%', left: '0%' ,opacity:0 }; break; case 1: return { top: '0%', left: '100%' ,opacity:0 }; break; case 2: return { top: '100%', left: '0%' ,opacity:0 }; break; default: return { top: '0%', left: '-100%' ,opacity:0 }; break; } } )(); if (event.type === 'mouseenter') { animateTo = positionIn; $overlay.css(positionOut); } else { animateTo = positionOut; } $overlay.stop(true).animate(animateTo, 280, 'easeOutExpo'); } function getMouseDirection (event) { var $el = $(event.currentTarget), offset = $el.offset(), w = $el.outerWidth(), h = $el.outerHeight(), x = (event.pageX - offset.left - w / 2) * ((w > h)? h / w: 1), y = (event.pageY - offset.top - h / 2) * ((h > w)? w / h: 1), direction = Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90 + 3) % 4; return direction; } var $listitem = $('#listContents') $listitem.on('mouseenter mouseleave', '.listBox', hoverDirection);
こちらはmouseenter
、mouseleave
のイベント時にリストのどの方向からマウスをenter, mouseleaveしたかでオーバーレイ要素のアニメーションを変えています。
2.オーバーレイアニメーション(上下スライドイン)
透過した画像を上下に配置し、ホバーした際に上下の透過画像がリスト上に重なる様にアニメーションしています。
$('#listContents li .bg_s_mask_top').css({top:'-200px'}); $('#listContents li .bg_s_mask_bottom').css({top:'310px'}); $('.hoverBox').css({top:'-390px'}); $('#listContents li').each(function(i,e) { var self =$(this) $(this).hover(function(){ $(this).find('.bg_s_mask_top').stop(true, false).velocity({ top:'-16px' }, { duration: 370, easing: 'easeInOutQuart'}); $(this).find('.bg_s_mask_bottom').stop(true, false).velocity({ top:'145px' }, { duration: 370, easing: 'easeInOutQuart'}); $(this).find('.hoverBox').stop(true, false).velocity({ top:'30px' }, { duration: 290, easing: 'easeInOutQuart',delay: 70}); },function(){ $(this).find('.bg_s_mask_top').stop(true, false).velocity({ top:'-200px' }, { duration: 330, easing: 'easeInOutQuart'}); $(this).find('.bg_s_mask_bottom').stop(true, false).velocity({ top:'310px' }, { duration: 330, easing: 'easeInOutQuart'}); $(this).find('.hoverBox').stop(true, false).velocity({ top:'-390px' }, { duration: 240, easing: 'easeInOutQuart'}); }) });
この方法はアイディア次第でいろんな応用がきくので便利です。ベタ色の背景色にすればマスクとしても利用できます。