클릭
버튼을 클릭하면 명언이 나와요
-이름이 나와요
마우스 효과 3번째 완성
이번 3번째 효과는 뒤에 배경 이미지가 1개 있습니다.
그리고 div태그로 width값, height값을 주고 background-image로 1개 넣었습니다.
그리고 fixed로 고정을 시켜놓고 마우스를 움직일때마다 배경의 이미지가 나오게 했습니다.
HTML코드
<body class="img03 bg03 font03">
<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 class="active"><a href="mouseEffect03.html">3</a></li>
<li><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__text">
<p>The most important thing in life is not how it ends, but how it starts.</p>
<p>인생에서 가장 중요한 것은 그것이 어떻게 끝나느냐가 아니라, 어떻게 시작하는가이다</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:skadldldl123@gmail.com">mailto:skadldldl123@gmail.com</a>
</footer>
<!-- //footer -->
</body>코드설명
1. div태그 중 .mouse__wrap은 "이미지 1개를 담는 div", "가운데에 들어가는 글씨"를 담고 있습니다.
2.
<div class="mouse__cursor"></div>이게 이제 width, height값을 갖고. 이 안에 고정된 이미지를 담고 마우스를 움직일때마다 보여줍니다.
3.
<div class="mouse__text">
<p>The most important thing in life is not how it ends, but how it starts.</p>
<p>인생에서 가장 중요한 것은 그것이 어떻게 끝나느냐가 아니라, 어떻게 시작하는가이다</p>
</div>화면 정가운데에 들어가는 글씨입니다.
이번에는 p태그 안에 span태그는 없습니다.
CSS코드
<style>
#header {
/* position: relative; */
z-index: 100;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
z-index: 10;
}
.mouse__text p {
font-size: 2.5vw;
line-height: 1.6;
}
.mouse__text p span {
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
background-color: rgba(255, 255, 255, 0.5);
background-image: url(img/mouseffect01-min.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: 1;
}
</style>
JAVASCRIPT코드
<script>
// 선택자
const cursor = document.querySelector(".mouse__cursor");
window.addEventListener("mousemove", (e) => {
gsap.to(cursor, {
duration: 0.5,
// left: e.pageX - cursor.clientWidth/2,
// top: e.pageY - cursor.offsetHeight/2
left : e.pageX - cursor.getBoundingClientRect().width/2,
top : e.pageY - cursor.getBoundingClientRect().height/2
});
});
</script>코드설명
1.
const cursor = document.querySelector(".mouse__cursor");document.querySelector("대상");은 클래스를 찾습니다.
2.
window.addEventListener("mousemove", (e) => {
gsap.to(cursor, {
duration: 0.5,
// left: e.pageX - cursor.clientWidth/2,
// top: e.pageY - cursor.offsetHeight/2
left : e.pageX - cursor.getBoundingClientRect().width/2,
top : e.pageY - cursor.getBoundingClientRect().height/2
});
});웹페이지에서 마우스를 움직일때마다 마우스의 좌표값을 가져와서 left와 top에 데이터를 저장합니다.
(gsap은 고정된 배경 이미지를 담고 있는 div태그가 마우스를 움직일때마다 효과를 주기 위해서 사용하였습니다.)
| cursor: none; | 마우스 모양이 사라집니다. |
| user-select: none; | 사용자가 텍스트를 선택 할수 있는지 지정합니다. |
| pointer-events: none; | 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정합니다. |