오늘은 제이쿼리를 이용해 드래그 효과를 만들어보도록 하겠습니다.
구조
<!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>Game Effect</title>
<link rel="stylesheet" href="css/bg.css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/game.css">
</head>
<body>
<header id="header">
<h1>🎮JJUL GAME WORLD🎮</h1>
<div class="time">2023년 4월 24일 09시 30분 15초</div>
</header>
<main>
<div class="cursor">
<img src="img/game_mouse01.png" alt>
</div>
<div class="icon__box">
<div class="icon1">
<img src="img/game_icon01.png" alt="뮤직">
<span>MUSIC</span>
</div>
<div class="icon2">
<img src="img/game_icon02.png" alt="뮤직">
<span>MUSIC</span>
</div>
<div class="icon3">
<img src="img/game_icon03.png" alt="뮤직">
<span>MUSIC</span>
</div>
<div class="icon4">
<img src="img/game_icon04.png" alt="뮤직">
<span>MUSIC</span>
</div>
</div>
</main>
<footer id="footer">
<div class="info">현재 윈도우를 사용하고 있으며, 화면 크기는 1920 X 760입니다.</div>
</footer>
</body>
</html>기본적으로 header에 현재 날씨를 표시할 것이고, 메인엔 커서 이미지와 icon들이 들어갑니다. 그리고 footer에는 OS를 나타내줄 것입니다.
스크립트_jquery와 gsap
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>제이쿼리를 연동시켜줍니다.
마우스 커서
window.onload = function(){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {duration: 0, left: e.pageX - 5, top: e.pageY - 10});
});
printTime(); // 오른쪽 상단 시간
printAgent(); // 하단 중앙에 메시지
}1. window.onload = function(){...} : HTML 문서가 로드되면, 해당 익명 함수를 실행합니다.
2. 마우스 이벤트가 발생할 때마다, 해당 콜백 함수가 실행됩니다. 마우스 이벤트가 발생할 때마다, 해당 함수는 gsap 라이브러리를 사용하여 마우스 커서(.cursor)를 마우스 위치로 이동시킵니다.
3. gsap.to(".cursor", {duration: 0, left: e.pageX - 5, top: e.pageY - 10}) : gsap 라이브러리를 사용하여 .cursor 클래스를 가진 HTML 요소의 위치를 이동시킵니다.
스크립트_현재 시간 구현하기
두가지 방법을 사용했습니다.
첫 번째 방법
function time(){
const now = document.querySelector(".time");
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth()+1;
const date = today.getDate();
const hours = today.getHours();
const minute = today.getMinutes();
const seconds = today.getSeconds();
now.innerHTML = year + "년 " + month +"월 " + date + "일 "+ hours + "시" + minute + "분" + seconds + "초";
}
time();
setInterval(time,1000);
1. time 함수를 만들고 now라는 변수를 선언합니다. 이 변수는 HTML 문서에서 .time 클래스를 가진 요소를 찾아서 가져옵니다. 이 요소는 현재 시간을 출력하는데 사용됩니다.
2. today 변수를 선언합니다. 이 변수는 현재 시간 정보를 담고 있는 Date 객체를 생성합니다.
3. 각각 year, month, date, hours, minute, seconds라는 변수를 선언하고, today 객체에서 현재 연도, 월, 일, 시간, 분, 초 정보를 가져옵니다.
4. now.innerHTML = year + "년 " + month +"월 " + date + "일 "+ hours + "시" + minute + "분" + seconds + "초"; : now 요소의 내용을 현재 시간 정보로 업데이트합니다. innerHTML 속성을 사용하여 요소의 내용을 수정하고, 문자열 연산을 사용하여 현재 시간 정보를 문자열로 변환하여 출력합니다.
두 번째 방법
이 방법은 위의 방법보다 간단한 소스입니다.
let clock = document.querySelector(".time");
setInterval(function () {
clock.innerHTML = new Date().toLocaleString();
}, 1000);1. clock이라는 변수를 선언합니다. 이 변수는 HTML 문서에서 .time 클래스를 가진 요소를 찾아서 가져옵니다. 이 요소는 현재 시간을 출력하는데 사용됩니다.
2. setInterval 함수를 호출합니다.
3. clock.innerHTML = new Date().toLocaleString(); : clock 요소의 내용을 현재 시간 정보로 업데이트합니다. innerHTML 속성을 사용하여 요소의 내용을 수정하고, new Date()를 통해 현재 시간을 가져와 toLocaleString() 메서드를 사용하여 지역에 맞는 시간 문자열로 변환합니다.
🔍toLocaleString()
toLocaleString()은 JavaScript의 내장 함수 중 하나로, 숫자, 날짜, 시간 등을 지역에 맞는 형식의 문자열로 변환하는 함수입니다.
new Date().toLocaleString()은 현재 날짜와 시간을 지역에 맞는 형식의 문자열로 반환합니다. 이때 반환되는 문자열은 브라우저 또는 운영체제의 설정에 따라 다르게 표시됩니다.
toLocaleString() 함수는 여러 가지 옵션을 가지고 있어서, 변환할 대상의 종류나 출력할 형식을 지정할 수 있습니다. 이를 통해 사용자가 원하는 형식으로 변환할 수 있습니다.
OS 정보 표시하기
//운영체제
const os = () => {
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
let infor = document.querySelector(".info");
if (os.indexOf("windows") >= 0) {
infor.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("macintosh") >= 0) {
nfor.innerHTML = "현재 맥을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("iphone") >= 0) {
infor.innerHTML = "현재 아이폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("android") >= 0) {
infor.innerHTML = "현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
}
}
os();🔍navigator.userAgent
navigator.userAgent 속성은 브라우저에서 사용자 에이전트(user agent) 문자열을 반환하는 속성입니다. 사용자 에이전트 문자열은 브라우저의 종류와 버전, 운영체제의 종류와 버전 등을 포함합니다. 이를 이용하여 운영체제 종류를 판별합니다
if-else 문을 이용하여, 현재 운영체제가 Windows인지, macOS인지, iOS인지, Android인지를 판별하고, 해당하는 운영체제의 정보를 출력합니다. 출력할 정보는 screen.width와 screen.height를 이용하여 현재 디스플레이의 가로, 세로 크기를 구하여 출력합니다
아이콘 드래그 효과
const classRemove = () => {
$("#header").removeClass("red blue green yellow");
}
$(".icon1").draggable({
containment: ".icon__box", scroll:false,
start: function() {
$(".info").html("dd");
$(".cursor img").attr("src", "img/game_mouse01.png");
},
drag: function() {
$(".info").html("지금은 <span style='color:red'>빨간색</span> 폴더를 드래그하고 있습니다.");
$("#header").addClass("red");
},
stop: function() {
$(".info").html("드래그가 끝났습니다.");
setTimeout(os,3000);
setTimeout(classRemove,3000);
}
});
$(".icon2").draggable({
containment: ".icon__box", scroll:false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse02.png");
},
drag: function() {
$(".info").html("지금은 <span style='color:blue'>파란색</span> 폴더를 드래그하고 있습니다.");
$("#header").addClass("blue");
},
stop: function() {
$(".info").html("드래그가 끝났습니다.");
setTimeout(os,3000);
setTimeout(classRemove,3000);
}
});
$(".icon3").draggable({
containment: ".icon__box", scroll:false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse03.png");
},
drag: function() {
$(".info").html("지금은 <span style='color:green'>초록색</span> 폴더를 드래그하고 있습니다.");
$("#header").addClass("green");
},
stop: function() {
$(".info").html("드래그가 끝났습니다.");
setTimeout(os,3000);
setTimeout(classRemove,3000);
}
});
$(".icon4").draggable({
containment: ".icon__box", scroll:false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse04.png");
},
drag: function() {
$(".info").html("지금은 <span style='color:yellow'>노란색</span> 폴더를 드래그하고 있습니다.");
$("#header").addClass("yellow");
},
stop: function() {
$(".info").html("드래그가 끝났습니다.");
setTimeout(os,3000);
setTimeout(classRemove,3000);
}
});1. $(".icon1")을 시작으로 하는 네 개의 드래그 가능한 아이콘(icon1, icon2, icon3, icon4)을 선택합니다. 이들 아이콘은 draggable 메소드로 드래그할 수 있도록 만들어졌습니다.
2. containment: ".icon__box", scroll:false: 드래그 영역을 .icon__box 요소로 제한하고, 스크롤이 되지 않도록 설정합니다.
3. start 이벤트 핸들러: 아이콘이 드래그되기 시작하면, .cursor 요소의 이미지를 img/game_mouse01.png로 변경합니다.
마우스 커서의 색상을 각 아이콘의 색상으로 변경해주었습니다.
4. drag 이벤트 핸들러: 아이콘이 드래그되는 동안, .info 요소에 현재 드래그 중인 폴더의 색깔에 따른 메시지를 출력하고, header 요소에 해당 색깔 클래스(red, blue, green, yellow)를 추가합니다.
5.stop 이벤트 핸들러: 아이콘이 드래그되는 것이 멈추면, .info 요소에 "드래그가 끝났습니다."라는 메시지를 출력하고, 3초 후에 os 함수를 실행합니다. 그리고 classRemove 함수를 3초 후에 실행하여 header 요소에서 해당 색깔 클래스(red, blue, green, yellow)를 제거합니다.
6. $(".icon2"), $(".icon3"), $(".icon4") 아이콘에 대해서도 2~6번과 같은 작업을 반복합니다. 각각의 아이콘에 대해서 다른 색깔 클래스가 추가됩니다.
완성된 페이지와 코드보기
