[JS] カーソル進入位置に合わせて変わるアニメーション

というロールオーバー演出が使われているFlashサイトを以前どこかで見かけました。残念ながらURLとかは忘れましたが、触ってて気持ち良かったことだけは覚えていたので、いつかどこかでパクらせて頂こうと思いJSで作ってみました。

デモ

最初は斜めも含めた8方向で作ってましたが、それだとカーソルを乗せたり離したりを繰り返した時の動きがフワフワと不安定な印象で、あんまり気持ちよくなかったため4方向にしました。要素のサイズがある程度以上大きい場合は8方向の方がしっくりくると思います。

主要なコードは以下。

HTML

<div class="box">
	<div class="overlay"></div>
</div>

CSS

.box {
	position: relative;
	width: 60px;
	height: 60px;
	overflow: hidden;
	background: #333;
}
.overlay {
	position: absolute;
	top: 60px;
	width: 60px;
	height: 60px;
}

JavaScript(jQuery)

jQuery( function( $ ) {

	var hoverHandler = function( e ) {

		var isMouseEnter = e.type === 'mouseenter',
		$box = $( this ),
		$overlay = $( '.overlay', $box ),
		overlayW = $overlay.width(),
		mouseX = e.clientX - ($box.offset().left + overlayW / 2),
		mouseY = e.clientY - ($box.offset().top + overlayW / 2),
		degrees = Math.atan2( mouseY, mouseX ) * 180 / Math.PI,
		style = {};

		if ( degrees > -135 && degrees <= -45 ) {
			style.top = -overlayW;
			style.left = 0;
		} else if ( degrees > -45 && degrees <= 45 ) {
			style.top = 0;
			style.left = overlayW;
		} else if ( degrees > 45 && degrees <= 135 ) {
			style.top = overlayW;
			style.left = 0;
		} else {
			style.top = 0;
			style.left = -overlayW;
		}

		$overlay
		.css( {
			top: isMouseEnter ? style.top : 0,
			left: isMouseEnter ? style.left : 0
		} )
		.stop( true )
		.animate( {
			top: isMouseEnter ? 0 : style.top,
			left: isMouseEnter ? 0 : style.left
		}, 200 );

	};

	$( '.box' )
	.on('mouseenter', hoverHandler )
	.on('mouseleave', hoverHandler );

});

僕に算数の知識とやわらかい頭脳があれば、もうちょいなんとかなるんだけど。そもそも角度から求めるべきじゃないのかな？前述のFlashサイトではどうやってたんだろう…

Tweet