마우스 오버시 마우스포인터 방향을 따라 들어오고 나가는 효과를 구현해본 샘플입니다.
데모 : http://dohoons.com/test/mouseDir/index.html
CSS
.container { margin:100px; overflow:hidden; } .block { float:left; width:100px; height:200px; margin:30px; background:#eee; position:relative; overflow:hidden; } .bg { width:100%; height:100%; background:red; position:absolute; top:0; left:0; transform:translate3d(-100%,-100%,0); transition:all 0.3s; }
HTML
<div class="container"> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> <div class="block"><div class="bg"></div></div> </div>
JS
$.fn.hitTest = function(x, y){ var bounds = this.offset(); bounds.right = bounds.left + this.outerWidth(); bounds.bottom = bounds.top + this.outerHeight(); if(x >= bounds.left){ if(x <= bounds.right){ if(y >= bounds.top){ if(y <= bounds.bottom){ return true; } } } } return false; } $(document).ready(function() { var mouse = {}, $block = $('.container .block'), startFlag = false; $(document).on('mousemove', function(e) { mouse.x = e.pageX; mouse.y = e.pageY; $block.each(function(index, el) { var $this = $(this), hover = $this.hitTest(mouse.x, mouse.y), $bg = $this.find('.bg'), $offset = $this.offset(), width = $this.width(), height = $this.height(), center = { x : $offset.left + (width / 2), y : $offset.top + (height / 2) } range = { x1 : center.x + width / 6, x2 : center.x - width / 6, y1 : center.y + height / 6, y2 : center.y - height / 6 }, toStyle = { transition : (startFlag) ? 'all 0.3s' : 'none' }; if(!hover) { if(mouse.x > range.x1) { // right toStyle.left = '200%'; } else if(mouse.x < range.x2) { // left toStyle.left = '0'; } else { // center toStyle.left = '100%'; } if(mouse.y > range.y1) { // bottom toStyle.top = '200%'; } else if(mouse.y < range.y2) { // top toStyle.top = '0'; } else { // center toStyle.top = '100%'; } $bg.css(toStyle); } }); startFlag = true; }); $block.on('mouseenter', function(e) { var $this = $(this), $bg = $this.find('.bg'), $offset = $this.offset(), width = $this.width(), height = $this.height(), center = { x : $offset.left + (width / 2), y : $offset.top + (height / 2) }, range = { x1 : center.x + width / 6, x2 : center.x - width / 6, y1 : center.y + height / 6, y2 : center.y - height / 6 }, fromStyle = { transition : 'none' }, toStyle = { transition : 'all 0.3s' }; if(mouse.x > range.x1) { // right fromStyle.left = '200%'; toStyle.left = '100%'; } else if(mouse.x < range.x2) { // left fromStyle.left = '0'; toStyle.left = '100%'; } else { // center fromStyle.left = '100%'; toStyle.left = '100%'; } if(mouse.y > range.y1) { // bottom fromStyle.top = '200%'; toStyle.top = '100%'; } else if(mouse.y < range.y2) { // top fromStyle.top = '0'; toStyle.top = '100%'; } else { // center fromStyle.top = '100%'; toStyle.top = '100%'; } $bg.css(fromStyle); setTimeout(function() { $bg.css(toStyle); }, 10); }); });