728x90
반응형
마우스 이펙트 - 마우스 조명 효과
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
코드 보기(HTML, JAVASCRIPT, CSS / CSS1 / CSS2) / 완성화면
코드 블럭
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
#header {
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: 2vw;
line-height: 1.6;
}
.mouse__text p:last-child {
font-size: 2.5vw;
}
.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/mouseEffect09-min.jpg);
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#footer {
z-index: 10;
}
</style>
</head>
<body class="img09 bg03 font03">
<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="mouseEffect04.html">4</a></li>
<li><a href="mouseEffect05.html">5</a></li>
<li><a href="mouseEffect06.html">6</a></li>
</ul>
</header>
<!-- //header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>To truly smile, you must endure the pain, and you must also learn to enjoy the pain</p>
<p>진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해</p>
</div>
</div>
</main>
<!-- //main -->
<footer id="footer">
<a href="mailto:dongjin6539@naver.com">dongjin6539@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>
코드 블럭 구성
- body 태그에 알맞은 header 구역, main 구역, footer 구역을 만들어줍니다.
- header 태그에 h1 태그, p 태그, ul 태그를 사용해서 제목, 텍스트, 목록을 입력해줍니다.
- main 태그에 div 태그를 사용해 class "mouse__wrap"명을 만들어줍니다.
- footer 태그에 알맞는 텍스트를 입력해줍니다.
- class "mouse__wrap"에 자식으로 div 태그를 사용해 class "mouse__cursor", "mouse__text" 명을 만들어주고 텍스트를 입력해줍니다.
- 공통적으로 사용할 CSS는 다른 페이지를 작성해서 효과적으로 이용합니다.
- 이 부분 페이지에서만 사용되는 스타일은 class 명을 가져와 style 태그를 사용해 스타일을 입력해줍니다.
CSS1
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/earlyfont/EF_Hyunygothic.css');
@import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css');
@import url('https://webfontworld.github.io/nixgon/NixgonFonts.css');
@import url('https://webfontworld.github.io/woori/Wooridaum.css');
@import url('https://webfontworld.github.io/NanumSquare/NanumSquare.css');
@import url('https://webfontworld.github.io/amore/AritaBuri.css');
@import url('https://webfontworld.github.io/tmoney/TmoneyRoundWind.css');
@import url('https://webfontworld.github.io/jikji/JHaebaragi.css');
@import url('https://webfontworld.github.io/nhn/Godo.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #222;
}
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;
}
.font01 {
font-family: 'NexonLv1Gothic';
font-weight: 300;
}
.font02 {
font-family: 'EF_Hyunygothic';
}
.font03 {
font-family: 'HealthsetGothic';
}
.font04 {
font-family: 'NixgonFonts';
}
.font05 {
font-family: 'Wooridaum';
}
.font06 {
font-family: 'NanumSquare';
}
.font07 {
font-family: 'AritaBuri';
}
.font08 {
font-family: 'TmoneyRoundWind';
}
.font09 {
font-family: 'JHaebaragi';
}
.font10 {
font-family: 'Godo';
}- 다양한 폰트를 사용하기 위해 종류를 여러 개 만들어줍니다.
CSS2
body {
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center center;
background-size: cover;
}
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: rgba(60, 136, 139, 0.8);
}
body.bg02::after {
background: rgba(121, 139, 47, 0.8);
}
body.bg03::after {
background: rgba(30, 50, 70, 0.97);
}
body.bg04::after {
background: rgba(140, 60, 107, 0.8);
}
body.bg05::after {
background: rgba(170, 71, 71, 0.8);
}
body.bg06::after {
background: rgba(75, 154, 66, 0.8);
}
body.bg07::after {
background: rgba(205, 207, 91, 0.8);
}
body.bg08::after {
background: rgba(140, 98, 60, 0.8);
}
body.bg09::after {
background: rgba(20, 122, 150, 0.8);
}
body.bg10::after {
background: rgba(117, 112, 171, 0.8);
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header p {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header li {
display: inline-block;
}
#header li a {
border: 1px solid #fff;
border-radius: 5px;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}- body의 배경 이미지 속성과 색상을 입력해줍니다.
- 다른 목록의 페이지에서 사용될 코드 블럭의 id #header, #footer 공통적인 스타일 속성을 입력해줍니다.
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 border 값 미포함
// console.log(cursor.clientHeight); // 190 border 값 미포함
// console.log(cursor.offsetWidth); // 200 border 값 포함
// console.log(cursor.offsetHeight); // 200 border 값 포함
const circle = cursor.getBoundingClientRect();
// const DOMRect = {
// bottom : 200,
// height : 200,
// left : 0,
// right : 200,
// top : 0,
// width : 200,
// x : 0,
// y : 0
// };
window.addEventListener("mousemove", e => {
gsap.to(cursor, {
duration: 0.5,
left: e.pageX - circle.width/2,
top: e.pageY - circle.height/2,
});
});
</script>
자바스크립트 이용
- 커서에 대한 선택자를 document.querySelector( )를 사용해서 만들어줍니다.
- 커서의 효과가 가운데로 오기 위해 width값과 height값을 구해줍니다.
- 값을 구하기 위해 clientWidth, clientHeight, offsetWidth, offsetHeight 속성을 사용해서 값을 구해줍니다.
- 속성 값을 사용해서 window.addEventListener("mousemove") 메서드와 2번 페이지에서 사용했던 gsap를 사용해서 커서의 가운데로 오게끔 해서 입력해줍니다.
- 위에 4가지를 쓰는 대신에 요소 메서드인 getBoundingClinetRect( )를 사용해서 bottom, height, left, right, top, width, x, y의 값을 구해줍니다.
- console.log( )를 사용해 보면 객체로 DOMRect라는 요소로 객체가 나열됩니다.
- 객체로 나열된 값을 가지고 와서 clientWidth, clientHeight, offsetWidth, offsetHeight 대신 값을 가지고 옵니다.
- 그러면 DOMRect라는 요소를 객체로 나열해서 값을 가져와야 하는 불편함이 있어 getBoundingClientRect( ) 메서드에 변수를 지정해서 객체의 값을 가져오면 훨씬 편하게 작업을 할 수 있습니다.
참고
- 아직 잘 모르는 자바스크립트 속성에 대해 알아보겠습니다.
| 속성 | 속성 설명 |
| clientWidth | 요소의 가로 값(margin/border 값 미포함) |
| clientHeight | 요소의 세로 값(margin/border 값 미포함) |
| offsetWidth | 요소의 가로 값(border/padding 값 포함) |
| offsetHeight | 요소의 세로 값(border/padding 값 포함) |
| pageX | X좌표 값 : 페이지 기준 |
| pageY | Y좌표 값 : 페이지 기준 |
| getBoundingClientRect( ) | 요소의 크기 및 위치 값을 설정 |
- 아직 잘 모르는 CSS 속성에 대해 알아보겠습니다.
| 속성 | 속성 설명 |
| background-size | 배경 이미지 크기를 설정합니다. |
| background-position | 배경 이미지의 초기 위치를 설정합니다. |
| background-attachment | 배경 이미지의 위치가 뷰포트 내에서 고정되어 있는지 또는 포함 블록과 함께 스크롤되는지 여부를 설정합니다. |
https://dongjin6539.github.io/web2023/javascript/index.html
https://dongjin6539.github.io/web2023/javascript/javascript15.html
https://dongjin6539.github.io/web2023/javascript/mouse/mouseEffect03.html
728x90
반응형
