티스토리 뷰
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 텍스트를 해당 좌표만큼 움직여주는 구조이다.
텍스트에 그림자효과를 주어 각각의 색깔을 지정하고 좌표값에 따라 위치를 조정하는 방식으로 표현했다.
자세한 소스는 사이트를 참고!
'Script Sample > Mouse Effect' 카테고리의 다른 글
Mouse Effect 07 - 이미지 오버 효과 (0) | 2022.04.13 |
---|---|
Mouse Effect 06 - 텍스트 효과 (0) | 2022.04.13 |
Mouse Effect 05 - 이미지 효과2 (0) | 2022.02.24 |
Mouse Effect 04 - 이미지 효과 (0) | 2022.02.24 |
Mouse Effect 03 - 조명 효과 (0) | 2022.02.23 |
© 2018 webstoryboy