HTML
<body class="img07 bg02 ROKA" >
<header id="header">
<h1>Javascript Mouse Effect03</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="mouseEffect01.html">4</a></li>
<li><a href="mouseEffect01.html">5</a></li>
<li><a href="mouseEffect01.html">6</a></li>
</ul>
</header>
<!-- //haeder-->
<main id="main">
<div class="mouse_wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>Look up at the stars, nor down at your feet.</p>
<p>고개를 숙인 채 당신의 발을 보지 말고, 마우스를 움직여 하늘의 별을 보아라</span></p>
</div>
</div>
</main>
<!-- //main-->
<footer id="footer">
<a href="dlscks0930@naver.com">dlscks0930@naver.com</a>
</footer>
<!-- //footer-->
CSS
mouse.css
더보기
body {
width: 100%;
height: 100vh;
background-position: center center;
background-size: cover;
overflow: hidden;
}
body.img01{
background-image: url(../img/mouseEffect01-min.jpg);
}
body.img02{
background-image: url(../img/mouseEffect02-min.jpg);
}
body.img03{
background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04{
background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05{
background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06{
background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07{
background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08{
background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09{
background-image: url(../img/mouseEffect09-min.jpg);
}
body.img10{
background-image: url(../img/mouseEffect10-min.jpg);
}
body::after {
content: '';
position: absolute;
left: 0; top: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
body.bg01::after {
background-color: rgba(97, 86, 34, 0.692);
}
body.bg02::after {
background-color: rgba(34, 35, 97, 0.93);
}
body.bg03::after {
background-color: rgba(226, 121, 117, 0.692);
}
body.bg04::after {
background-color: rgba(41, 184, 129, 0.692);
}
body.bg05::after {
background-color: rgba(139, 41, 184, 0.692);
}
body.bg06::after {
background-color: rgba(184, 41, 125, 0.692);
}
body.bg07::after {
background-color: rgba(41, 155, 184, 0.692);
}
body.bg08::after {
background-color: rgba(41, 184, 41, 0.692);
}
body.bg09::after {
background-color: rgba(184, 170, 41, 0.692);
}
body.bg10::after {
background-color: rgba(184, 41, 41, 0.692);
}
.Jamsil{
font-family: "TheJamsil";
}
.cafe24{
font-family: "Cafe24ClassicType";
}
.BMJua{
font-family: "BMJua";
}
.PyeongChang{
font-family: "PyeongChang";
}
.MabinogiClassic{
font-family: "MabinogiClassic";
}
.BMDoHyeon{
font-family: "BMDoHyeon";
}
.JalpullineunOneul{
font-family: "JalpullineunOneul";
}
.JalpullineunHaru{
font-family: "JalpullineunHaru";
}
.BaskinRobbins{
font-family: "BaskinRobbins";
}
.ROKA{
font-family: "ROKA";
}reset.css
더보기
@import url('https://webfontworld.github.io/TheJamsil/TheJamsil.css');
@import url('https://webfontworld.github.io/Cafe24Classictype/Cafe24ClassicType.css');
@import url('https://webfontworld.github.io/BMJua/BMJua.css');
@import url('https://webfontworld.github.io/PyeongChang/PyeongChang.css');
@import url('https://webfontworld.github.io/NexonMabinogi/MabinogiClassic.css');
@import url('https://webfontworld.github.io/BMDoHyeon/BMDoHyeon.css');
@import url('https://webfontworld.github.io/Jalpullineun/JalpullineunOneul.css');
@import url('https://webfontworld.github.io/Jalpullineun/JalpullineunHaru.css');
@import url('https://webfontworld.github.io/baskinrobbins/BaskinRobbins.css');
@import url('https://webfontworld.github.io/armynuri/ROKA.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*,*::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #000000;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
li, ul, ol {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header p {
display: inline-block;
}
#header li {
display: inline-block;
}
#header li a {
width: 0px;
height: 0px;
border-bottom: 28px solid ;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a{
color: #fff;
}<style>
#header {
z-index: 100;
}
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
position: relative;
z-index: 0;
}
.mouse__text p {
font-size: 3vw;
line-height: 1.9;;
}.mouse__cursor {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
border-radius: 50%;
border: 5px solid #fff;
background-color: #ffffff3d;
background-image: url(img/mouseEffect07-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#header li.active a{
color: rgb(247, 92, 92);
}
</style>위 코드는 웹페이지의 스타일을 정의하는 CSS 코드입니다.
#header는 id가 'header'인 요소를 선택하며, z-index를 100으로 설정합니다.
.mouse__wrap은 클래스가 'mouse__wrap'인 요소를 선택하며, 커서를 숨기는 CSS 속성을 적용합니다.
.mouse__text는 클래스가 'mouse__text'인 요소를 선택하며, 텍스트가 보이는 영역입니다. 요소의 크기와 배치를 지정하고, 오버플로우를 숨기고 z-index를 0으로 설정합니다.
.mouse__text p는 클래스가 'mouse__text'인 요소의 하위 요소인 p태그를 선택하며, 글자 크기와 줄 간격을 설정합니다.
.mouse__cursor는 클래스가 'mouse__cursor'인 요소를 선택하며, 마우스 커서를 대체하는 요소입니다. 요소의 크기와 배치, 경계선과 배경색, 배경 이미지를 지정합니다. 특히, 배경 이미지의 위치는 가운데로 지정하며, 스크롤을 내리더라도 이미지가 고정되도록 배경-부착 속성을 사용합니다.
#header li.active a는 id가 'header'인 요소의 하위 요소인 li태그 중 클래스가 'active'인 요소의 하위 요소인 a태그를 선택하며, 해당 링크에 색상을 지정합니다.
javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
//선택자
const cursor = document.querySelector(".mouse__cursor");
console.log(cursor.clientWidth); //190
console.log(cursor.clientHeight); //190
console.log(cursor.offsetWidth); //200
console.log(cursor.offsetHeight); //200
console.log(cursor.getBoundingClientRect());
const circle = cursor.getBoundingClientRect();
//{
// bottom : 200,
// height : 200,
// left : 0,
// right : 200,
// top : 0,
// width : 200,
// x : 0,
// y : 0
//}
//console.log(DOMRect.width)
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - cursor.clientWidth/2,
top: e.pageY - cursor.clientHeight/2
});
});
</script>해당 코드는 GSAP( GreenSock Animation Platform ) 라이브러리를 사용하여 마우스 커서를 움직이는 효과를 구현하는 코드입니다.
먼저, 해당 코드에서는 querySelector를 사용하여 클래스가 mouse__cursor인 요소를 선택합니다. 그리고 console.log를 사용하여 해당 요소의 clientWidth, clientHeight, offsetWidth, offsetHeight 등의 값을 출력합니다.
다음으로 getBoundingClientRect()를 사용하여 해당 요소의 위치와 크기를 객체로 반환받아 circle 변수에 할당합니다. 이 객체는 bottom, height, left, right, top, width, x, y 등의 속성을 가지며, 해당 요소의 위치와 크기 정보를 담고 있습니다.
그 후, window 객체의 addEventListener를 사용하여 mousemove 이벤트를 등록하고, 해당 이벤트가 발생하면 GSAP 라이브러리의 to 메서드를 사용하여 cursor 요소의 위치를 변경합니다. 이때 e.pageX와 e.pageY를 사용하여 마우스의 위치를 알아내고, cursor 요소의 clientWidth와 clientHeight를 이용하여 마우스 커서가 요소의 중심에 오도록 설정합니다.
즉, 마우스를 움직일 때마다 cursor 요소가 마우스 커서를 따라 움직이는 효과를 구현하는 코드입니다.
댓글