rect() 를 이용한 마스크 효과

원리 : clip: rect(0px,60px,200px,0px);

https://www.w3schools.com/cssref/tryit.php?filename=trycss_clip

 

<div id="page-main">
    <div class="scene" id="scene-3">
        <div class="mask" id="m1"></div>
        <div class="mask" id="m2">
            <div class="line"></div>
        </div>
        <div class="mask" id="m3">
            <div class="line"></div>
        </div>
        <div class="mask" id="m4">
            <div class="line"></div>
        </div>
    </div>
</div>

 

$(function () {

    function initScene () {

        var $container = $('#scene-3'),            // 컨테이너
            $masks     = $container.find('.mask'), // 마스크
            $lines     = $masks.find('.line'),     // 경계
            maskLength = $masks.length,            // 마스크의 총수
            maskData   = [];
        
        $masks.each(function (i) {
            maskData[i] = { left: 0 };          // 마스크마다 왼쪽 좌표 저장
        });

        $container.on({
            mouseenter: function () {
                resizeMask($(this).index());
            },
            mouseleave: function () {
                resizeMask(-1);
            }
        }, '.mask');
        
        resizeMask(-1);                     // 처음, 마우스 빠졌을때

        function resizeMask (active) {      // 각 마스크 영역 애니메이션

            var w = $container.width(),
                h = $container.height();

            $masks.each(function (i) {
                var $this = $(this), 
                    maskleft;                   // 마스크 왼쪽 좌표

                if (active === -1) {            // 마우스가 빠진 상태
                    maskleft = w / maskLength * i;  // 균등한 위치
                } else if (active < i) {        // 마우스보다 오른쪽 i면
                    maskleft = w * (1 - 0.1 * (maskLength - i));   
                } else {
                    maskleft = w * 0.1 * i;
                };
             
                $(maskData[i]).stop(true).animate({ left: maskleft }, {
                    duration: 1000,
                    easing: 'easeOutQuart',
                    progress: function () {
                        var now = this.left;
                        $this.css({ clip: 'rect(0px ' + w + 'px ' + h + 'px ' + now + 'px)' });
                        $this.find($lines).css({left: now});
                    }
                });
            });
        }
    }

    initScene();

});