게임이팩트 만들기
다음 프레임과 같이 아이콘을 움직일 수 있으며 아이콘 색깔별 커서와 헤더색 변환, 시간입력, os크기 구현을 해보겠습니다.
코드블럭
<!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>
<div class="cursor">
<img src="img/game_mouse01.png" alt="">
</div>
<header id="header">
<h1>EUNJI'S GAME WORLD</h1>
<div class="time">2023년 4월 24일 09시 30분 15초</div>
</header>
<main>
<div class="icon__box">
<div class="icon1">
<img src="img/game_icon01.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
<div class="icon2">
<img src="img/game_icon02.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
<div class="icon3">
<img src="img/game_icon03.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
<div class="icon4">
<img src="img/game_icon04.png" alt="뮤직">
<span>뮤직듣기</span>
</div>
</div>
</main>
<footer id="footer">
<div class="info">현재 맥을 사용하고 있으면, 화면 크기는 1920 X 760 입니다.</div>
</footer>
</body>
</html>jQuery, jQueryUI, 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>
<script>✨이 코드는 jQuery, jQueryUI, GSAP의 JavaScript 라이브러리를 가져와 웹 페이지에 포함시키는 코드입니다. 이러한 라이브러리는 웹 개발에서 자주 사용되는 기능을 쉽게 구현할 수 있도록 도와줍니다.
✨jQuery는 DOM(Document Object Model)을 효율적으로 조작하고 AJAX 기능을 제공하는 자바스크립트 라이브러리입니다.
✨jQueryUI는 사용자 인터페이스(UI)를 만들기 위한 기능들을 제공하는 jQuery의 확장 라이브러리입니다. 드래그 앤 드롭, 리사이즈, 정렬, 대화상자 등 다양한 UI 요소들을 쉽게 구현할 수 있습니다.
✨GSAP는 웹 페이지에서 애니메이션 효과를 구현할 수 있는 자바스크립트 라이브러리입니다. 대규모 애니메이션 프로젝트를 구현할 수 있도록 높은 성능과 다양한 기능들을 제공합니다.
시간구현
let clock = document.querySelector(".time");
setInterval(function () {
clock.innerHTML = new Date().toLocaleString();
}, 1000);✨이 코드는 HTML 문서에서 클래스 이름이 "time"인 요소를 찾아 변수 "clock"에 할당하는 부분입니다. 그리고 이후에 "setInterval" 함수를 이용하여 1초마다 현재 시간을 "toLocaleString" 메서드를 사용하여 문자열 형태로 "clock" 요소 내부에 업데이트합니다.
OS크기 구현
let os = navigator.userAgent.toLowerCase();
let sw = screen.width;
let sh = screen.height;
let info = document.querySelector(".info");
if (os.indexOf("windows") >= 0) {
info.innerHTML = "현재 윈도우를 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("macintosh") >= 0) {
info.innerHTML = "현재 맥을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("iphone") >= 0) {
info.innerHTML = "현재 아이폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
} else if (os.indexOf("android") >= 0) {
info.innerHTML = "현재 안드로이드 폰을 사용하고 있으며, 화면 크기는 " + sw + "x" + sh + " 입니다."
}✨이 코드는 현재 사용자의 디바이스(OS)와 화면 크기 정보를 가져와서 그에 맞는 메시지를 출력하는 기능을 가진 자바스크립트 코드입니다.
✨navigator.userAgent.toLowerCase()를 사용하여 사용자의 OS 정보를 소문자 문자열로 가져옵니다. 그리고 screen.width와 screen.height를 사용하여 사용자의 화면 크기를 가져옵니다.
✨ document.querySelector(".info")를 사용하여 HTML 문서에서 class가 info인 요소를 선택합니다.
그리고 if/else if 문을 사용하여 사용자의 OS 정보를 분기 처리합니다. indexOf() 메소드를 사용하여 OS 정보 문자열에서 각각의 키워드(windows, macintosh, iphone, android)가 있는지를 체크하고, 있다면 해당하는 메시지를 출력합니다.
✨ info.innerHTML을 통해 HTML 요소의 내용을 변경하여 출력합니다.
자바스크립트
$(".icon1").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src","img/game_mouse01.png")
},
drag: function () {
$("#header").attr("style", "background:#eb3c3c","")
}
});
$(".icon2").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src","img/game_mouse02.png")
},
drag: function () {
$("#header").attr("style", "background:#334de0")
}
});
$(".icon3").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src","img/game_mouse03.png")
},
drag: function () {
$("#header").attr("style", "background:lightgreen")
}
});
$(".icon4").draggable({
containment: ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src","img/game_mouse04.png")
},
drag: function () {
$("#header").attr("style", "background:#ffef5a")
}
});
window.onload = function(){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX -5,
top:e.pageY -10
})
});
}
$(".icon2").draggable();
$(".icon3").draggable();
$(".icon4").draggable();
// $( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
window.addEventListener("mousemove", e=> {
gsap.to(".cursor", {
duration: 0,
left: e.pageX -5,
top: e.pageY -10
})
});✨이 코드는 HTML 문서에서 드래그 가능한 아이콘 요소들과 그 아이콘 요소들을 드래그할 때마다 변경되는 웹 페이지의 헤더 배경 색상을 정의하고, 마우스 커서의 위치를 움직이는 것을 애니메이션으로 처리하는 JavaScript 코드입니다.
✨드래그 가능한 아이콘 요소들은 jQuery UI 라이브러리의 draggable() 메서드를 사용하여 드래그 및 드롭 기능을 구현하고, containment 옵션을 사용하여 드래그할 수 있는 범위를 지정하고, scroll 옵션을 사용하여 스크롤이 발생하지 않도록 설정합니다.
✨각각의 아이콘 요소에 start 및 drag 이벤트 핸들러를 정의하여, 드래그가 시작될 때와 드래그하는 동안에 각각의 아이콘에 대한 마우스 커서의 모양을 변경하고, 페이지 헤더의 배경 색상을 변경합니다.
✨ window.onload 이벤트와 window.addEventListener() 메서드를 사용하여, 페이지 로드가 완료될 때와 마우스 커서가 움직일 때마다 gsap 라이브러리를 사용하여 마우스 커서를 따라 이동하는 애니메이션을 구현합니다.