버튼을 클릭하면 명언이 나와요
-이름이 나와요
최종 완성된 모습
저번에 배웠던 마우스 효과입니다.
이번거는 마우스가 특정 영역에서만 작동되게 만들었습니다.
HTML+CSS코드
<style>
#header {
/* position: relative; */
z-index: 100;
}
.mouse__wrap {}
.mouse__img {
width: 100%;
height: 100vh;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden
}
.mouse__img figure {
width: 50vw;
height: 60vh;
position: relative;
overflow: hidden;
background: red;
box-shadow: 0 50px 100px rgba(0,0,0,0.3);
border-radius: 5px;
transition: transform 500ms ease;
cursor: none;
}
.mouse__img figure:hover {
transform: scale(1.025);
}
.mouse__img figure img {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: 110%;
object-fit: cover;
filter: sepia(60%) saturate(200%);
}
.mouse__img figure figcaption {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 16px;
line-height: 1.4;
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
z-index: 1000;
user-select: none;
pointer-events: none;
}
</style>
</head>
<body class="img04 bg02 font02">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li><a href="mouseEffect02.html">2</a></li>
<li><a href="mouseEffect03.html">3</a></li>
<li class="active"><a href="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__img">
<figure>
<img src="./img/mouseffect07-min.jpg" alt="이미지">
<figcaption>
<p>Do not seek fancy things. What matters is your talent and the amount of love you pour into your actions.</p>
<p>화려한 일을 추구하지 말라. 중요한 것은 스스로의 재능이며, 자신의 행동에 쏟아 붓는 사랑의 정도이다.</p>
</figcaption>
</figure>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->코드 설명
1. div태그 중 .mouse__wrap은 "마우스를 따라다니는 div태그 2개와" / "가운데에 들어가는 Text"를 담고 있습니다.
2.
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
/* 사용자가 텍스트를 선택 할 수 있는지*/
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}div태그 중 .mouse__cursor은 제일 앞에 따라 다니는 조그만 모양입니다.
3.
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}div태그 중 .mouse__cursor2은 제일 뒤에 따라 다니는 큰 모양입니다.
4.
<div class="mouse__text">
<p>Set a <span class="active3">goal</span> and try to achieve it. Don't be afraid of <span class="active1">failure</span> and try more.</p>
<p><span class="active4">목표</span>를 세우고 그것을 이루기 위해 노력하라. <span class="active2">실패</span>를 두려워하지 말고 더 많이 시도하라</p>
</div>div태그 중 .mouse__text는 화면 가운데에 있는 글씨 입니다.
p태그 안에 있는 span태그는 이제 마우스가 들어오면 모양이 변합니다.
JAVASCRIPT코드
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
document.querySelector(".mouse__img figure").addEventListener("mousemove", (e) => {
gsap.to(".mouse__cursor", {
duration: 0.2,
left: e.pageX,
top: e.pageY
});
// 마우스 좌표 값
let mousePageX = e.pageX;
let mousePageY = e.pageY;
// 전체 화면 가로 값
window.innerWidth //1920 브라우저 크기
window.outerWidth //1920 브라우저 크기(스크롤바 포함)
window.screen.width //1920 화면 크기
// 마우스 좌표값 기준점 가운데로 설정
let centerPageX = window.innerWidth / 2 - mousePageX;
let centerPageY = window.innerHeight / 2 - mousePageY;
// 이미지 움직이기
const imgMove = document.querySelector(".mouse__img figure img");
imgMove.style.transform = "translate(" + centerPageX/20 + "px, " + centerPageY/20 + "px)";
});
</script>코드 설명
1.document.querySelector(".mouse__img figure")는 CSS 선택자를 사용하여 클래스가 "mouse__img figure"인 요소를 선택합니다. 이 요소는 마우스 움직임에 따라 이미지를 움직일 대상입니다.
2.addEventListener("mousemove", (e) => {...})는 선택한 요소에 "mousemove" 이벤트를 추가합니다. 이벤트가 발생할 때마다 콜백 함수가 실행됩니다.
3.gsap.to(".mouse__cursor", {...})는 GSAP(GreenSock Animation Platform) 라이브러리를 사용하여 "mouse__cursor" 클래스를 가진 요소를 지정한 시간 동안 애니메이션으로 변경합니다. 이 경우, 요소의 위치를 마우스의 현재 좌표(e.pageX, e.pageY)로 설정합니다.
4.e.pageX와 e.pageY는 마우스 이벤트 객체에서 마우스 커서의 X 및 Y 좌표를 나타냅니다.
5.window.innerWidth, window.innerHeight, window.outerWidth, window.screen.width는 각각 브라우저 창의 내부 너비, 내부 높이, 외부 너비, 화면의 전체 너비를 나타냅니다.
6.let centerPageX = window.innerWidth / 2 - mousePageX;와 let centerPageY = window.innerHeight / 2 - mousePageY;는 마우스 좌표를 기준으로 중심점을 계산합니다. 이를 통해 마우스 커서가 화면의 중앙에 위치하도록 합니다.
7.imgMove.style.transform = "translate(" + centerPageX/20 + "px, " + centerPageY/20 + "px)";는 이미지 요소의 CSS transform 속성을 사용하여 이미지를 이동시킵니다. centerPageX와 centerPageY 값을 사용하여 이미지의 위치를 변경합니다. /20은 이동 거리를 조정하는 상수입니다. 이 값을 조정하여 이미지의 움직임 속도를 조절할 수 있습니다.