[jQuery]마우스 반응하는 3D팝업 및 click toggle 이벤트

팝업 관련해서 코드를 찾다가 재미있는 3D 팝업을 발견해서 'ㅡ'

소개를 해볼까하네요.

마우스에 반응하는 3D팝업이며, 

추가로 버튼을 클릭하면 팝업이 사라지고 나타나게

jQuery의 click 이벤트 toggle를 적용 해놓았습니다.

↓↓↓↓↓↓

I'm a new kind of popup.
Move your mouse around !

<div class="moving-zone">
    <div class="popup">
        <div class="popup-content">
            <div class="popup-text">
                I'm a new kind of <b>popup</b>.<br />
                Move your <b>mouse</b> around !
            </div>
        </div>
    </div>
</div>
<div>
<button class="btnpopup">POPUP Show/Hide</button>
</div>

var moveForce = 30; // max popup movement in pixels
var rotateForce = 20; // max popup rotation in deg

$(document).mousemove(function(e) {
    var docX = $(document).width();
    var docY = $(document).height();
    
    var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
    var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;
    
    var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);
    
    $('.popup')
        .css('left', moveX+'px')
        .css('top', moveY+'px')
        .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');
});

$(document).ready(function() {
    $('.btnpopup').click(function() {
            $('.popup').slideToggle("fast");
    });
});

참고문헌 및 관련링크.

1. 3D Movement Responsive Popup