IE7対応!リストのホバーアニメーションソースサンプル(オーバーレイ編)

2015/4/1 2016/1/25 Animation, JS/jQuery

「次回はリストの上に要素が乗るオーバーレイ編をお送りしたいと思います。」と言いつつ早3ヶ月。。。
大変長らくお待たせいたしました。IE7対応のホバーアニメーションシリーズの第2弾をお送りいたします。

ちなみに第1弾はこちら

1.オーバーレイアニメーション(マウス位置判別)

DEMO

		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.オーバーレイアニメーション(上下スライドイン)

DEMO

透過した画像を上下に配置し、ホバーした際に上下の透過画像がリスト上に重なる様にアニメーションしています。

		$('#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'});
			})
        });

この方法はアイディア次第でいろんな応用がきくので便利です。ベタ色の背景色にすればマスクとしても利用できます。

enumblog