이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/

티스토리 뷰




마우스가 들어오는 방향에 따라
오버효과를 주는 소스입니다. 
우선 CSS를 통해 방향에 따라 효과를 미리 지정해야 합니다.

.in-top .info {
   transform-origin: 50% 0%;
   animation: in-top $duration $timing-fn 0ms 1 forwards;
}
.in-right .info {
  transform-origin: 100% 0%;
  animation: in-right $duration $timing-fn 0ms 1 forwards;
}
.in-bottom .info {
  transform-origin: 50% 100%;
  animation: in-bottom $duration $timing-fn 0ms 1 forwards;
}
.in-left .info {
  transform-origin: 0% 0%;
  animation: in-left $duration $timing-fn 0ms 1 forwards;
}
.out-top .info {
  transform-origin: 50% 0%;
  animation: out-top $duration $timing-fn 0ms 1 forwards;
}
.out-right .info {
  transform-origin: 100% 50%;
  animation: out-right $duration $timing-fn 0ms 1 forwards;
}
.out-bottom .info {
  transform-origin: 50% 100%;
  animation: out-bottom $duration $timing-fn 0ms 1 forwards;
}
.out-left .info {
  transform-origin: 0% 0%;
  animation: out-left $duration $timing-fn 0ms 1 forwards;
}
@keyframes in-top {
  from {transform: rotate3d(-1, 0, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}
@keyframes in-right {
  from {transform: rotate3d(0, -1, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}
@keyframes in-bottom {
  from {transform: rotate3d(1, 0, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}
@keyframes in-left {
  from {transform: rotate3d(0, 1, 0, 90deg);}
  to   {transform: rotate3d(0, 0, 0, 0deg);}}
@keyframes out-top {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(-1, 0, 0, 102deg);}}
@keyframes out-right {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(0, -1, 0, 102deg);}}
@keyframes out-bottom {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(1, 0, 0, 101deg);}}
@keyframes out-left {
  from {transform: rotate3d(0, 0, 0, 0deg);}
  to   {transform: rotate3d(0, 1, 0, 102deg);}}

방향에 따른 keyframes도 다 설정하구요~
명령은 js에서 설정을 해야 합니다.

var getDirection = function (ev, obj) {
    var w = obj.offsetWidth,
        h = obj.offsetHeight,
        x = (ev.pageX - obj.offsetLeft - (w / 2) * (w > h ? (h / w) : 1)),
        y = (ev.pageY - obj.offsetTop - (h / 2) * (h > w ? (w / h) : 1)),
        d = Math.round( Math.atan2(y, x) / 1.57079633 + 5 ) % 4;
  
    return d;
};

var addClass = function ( ev, obj, state ) {
    var direction = getDirection( ev, obj ),
        class_suffix = "";
    
    obj.className = "";
    
    switch ( direction ) {
        case 0 : class_suffix = '-top';    break;
        case 1 : class_suffix = '-right';  break;
        case 2 : class_suffix = '-bottom'; break;
        case 3 : class_suffix = '-left';   break;
    }
    
    obj.classList.add( state + class_suffix );
};

// bind events
_nodes.forEach(function (el) {
    el.addEventListener('mouseover', function (ev) {
        addClass( ev, this, 'in' );
    }, false);

    el.addEventListener('mouseout', function (ev) {
        addClass( ev, this, 'out' );
    }, false);
});




See the Pen Direction-aware 3D hover effect by Noel Delgado (@noeldelgado) on CodePen.









이 사이트는 곧 패쇄 예정입니다. 새로 작업한 사이트로 와주세요^^ http://wiss.tistory.com/
댓글
댓글쓰기 폼