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

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

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

소개를 해볼까하네요.

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

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

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

↓↓↓↓↓↓


<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");
    });
});