티스토리 뷰

function getTwoDecimal(num) {
        return parseFloat(num.toFixed(2) + 0.5);
        }

        const mouse = {
        decimal(coord) {
            return getTwoDecimal(coord / 1000);
        },
        x(e) {
            return Math.abs(e.clientX - window.innerWidth / 2);
        },
        y(e) {
            return Math.abs(e.clientY - window.innerHeight / 2);
        } };


        const changeTextAlphaVal = (txt, e) => {
        const root = document.querySelector(":root");
        const cssVar = "--alpha";
        const currentAlpha = getComputedStyle(root).getPropertyValue(cssVar).trim();

        const max = parseFloat(currentAlpha);
        const dx = mouse.decimal(mouse.x(e));
        const dy = mouse.decimal(mouse.y(e));

        let alphaVal;
        if (dx <= 0) {
            alphaVal = dy >= max ? dy : getTwoDecimal(max - dy);
        } else {
            alphaVal = dx >= max ? dx : getTwoDecimal(max - dx);
        }

        txt.style.setProperty(cssVar, alphaVal);
        };

        function createShadow(e, currTarget) {
        // Walk effect based on Wes Bos' Mouse Move Shadow Exercise
        // https://tinyurl.com/touabxe
        const walk = Math.round(Math.max(window.innerWidth, window.innerHeight) / 6);
        const coordWalk = (coord, side) =>
        Math.round(coord / side * walk - walk / 2);
        const xWalk = coordWalk(e.clientX, currTarget.offsetWidth);
        const yWalk = coordWalk(e.clientY, currTarget.offsetHeight);

        const pink = [20, 40, 90];
        const blue = [40, 180, 120];
        const yellow = [100, 30, 190];
        const typoAlpha = 0.6;

        const typo = currTarget.querySelector(".typo");
        changeTextAlphaVal(typo, e); 

        typo.style.textShadow = `
            ${xWalk}px ${yWalk}px 0 rgba(${pink}, ${typoAlpha}),
            ${xWalk * -1}px ${yWalk * 2}px 0 rgba(${blue}, ${typoAlpha}),
            ${xWalk * -2}px ${yWalk * -1}px 0 rgba(${yellow}, ${typoAlpha})
            `;
        }

        function onMouseMove(e) {
        createShadow(e, e.currentTarget);
        }
        function onTouchMove(e) {
        createShadow(e.changedTouches[0], e.currentTarget);
        }

        const heading = document.querySelector(".mouse__text");
        heading.addEventListener("mousemove", onMouseMove);
        heading.addEventListener("touchmove", onTouchMove);

마우스 효과의 원리는 대부분 비슷하다

마우스의 좌표값을 구해서 이미지 or 텍스트를 해당 좌표만큼 움직여주는 구조이다.

텍스트에 그림자효과를 주어 각각의 색깔을 지정하고 좌표값에 따라 위치를 조정하는 방식으로 표현했다.

자세한 소스는 사이트를 참고! 

 

 

 

전체 사이트 보기

댓글
© 2018 webstoryboy