728x90
- 오늘은 게임 이펙트 입니다.
- 뭐 특별한게 있다기 보다는 움직이는 이미지(?) 배경에 넣어주고
- 파일들 드래그가 가능하게 해주었습니다.
- 배경은 특별한 css파일을 넣었습니다.
- 그리고 파일들을 클릭했을 때 헤더부분의 배경이 변하며 어떠한 아이콘을 선택하고 있는지 알려주는 문구를 띄웠고
- 현재시간을 알려주는 시계와 현재 스크린의 크기를 알려주는 문구를 만들어 주었습니다.
- 코드를 보시죠
<!DOCTYPE html>
<html lang="en">
<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 Effect01</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>KEBAB's GAME WORLD</h1>
<div class="time">2023년 4월 24일 16시 40분</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"> 현재<span class="iconInfo">---아이콘</span>를<span class="nowInfo">선택하였습니다.</span><br>현재 <span class="os">맥</span> 를사용하고 있으며, 화면 크기는 <span class="width">1920*1080</span> 입니다.</div>
</footer>- 막 특별한 것은 없습니다.
<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 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>
$(".icon1").draggable({containment : ".icon__box",scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse01.png");
$("#header").attr("class","tomato");
$(".iconInfo").attr( "class", 'iconInfo tomato' );
$(".iconInfo").html(" 뮤직듣기 ");
$(".nowInfo").html("선택하셨습니다.");
},
drag: function() {
$(".nowInfo").html("드래그하는 중입니다.");
},
stop: function() {
$(".nowInfo").html("드래그를 멈추셨습니다.");
}
});
$(".icon2").draggable({containment : ".icon__box",scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse02.png");
$("#header").attr("class","blue")
$(".iconInfo").attr( "class", 'iconInfo blue' );
$(".iconInfo").html(" 뮤직듣기 ");
$(".nowInfo").html("선택하셨습니다.");
},
drag: function() {
$(".nowInfo").html("드래그하는 중입니다.");
},
stop: function() {
$(".nowInfo").html("드래그를 멈추셨습니다.");
}
});
$(".icon3").draggable({containment : ".icon__box",scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse03.png"),
$("#header").attr("class","green")
$(".iconInfo").attr( "class", 'iconInfo green' );
$(".iconInfo").html(" 뮤직듣기 ");
$(".nowInfo").html("선택하셨습니다.");
},
drag: function() {
$(".nowInfo").html("드래그하는 중입니다.");
},
stop: function() {
$(".nowInfo").html("드래그를 멈추셨습니다.");
}
});
$(".icon4").draggable({containment : ".icon__box", scroll: false,
start: function() {
$(".cursor img").attr("src", "img/game_mouse04.png");
$("#header").attr("class","yellow")
$(".iconInfo").attr( "class", 'iconInfo yellow' );
$(".iconInfo").html(" 뮤직듣기 ");
},
drag: function() {
$(".nowInfo").html("드래그하는 중입니다.");
},
stop: function() {
$(".nowInfo").html("드래그를 멈추셨습니다.");
}
});
window.onload = function(){
window.addEventListener("mousemove", e => {
gsap.to(".cursor", {
duration: 0,
left: e.pageX -5,
top: e.pageY -10,
})
})
function printTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();
const timeString = `${year}년 ${month}월 ${date}일 ${hour}시 ${minute}분 ${second}초`;
$(".time").text(timeString);
setTimeout(printTime, 1000); // 1초마다 업데이트
}
$(document).ready(function() {
printTime();
});
// printAgent()
// os검사
let os = navigator.userAgent.toLowerCase();
if(os.indexOf("macintosh") > -1){
document.querySelector(".info .os").innerHTML = "맥os를"
} else if(os.indexOf("windows") > -1){
document.querySelector(".info .os").innerHTML = "윈도우os를"
}
// 화면크기
let screenLeft = window.screen.width;
let screenTop = window.screen.height;
document.querySelector(".info .width").innerHTML = screenLeft+"*"+screenTop
}
</script>- jquery와 gsap또한 사용하였기 때문에 링크를 긇어 왔습니다.
- 가장먼저 한것은 jquery를 사용하여 각각의 아이콘을 드래그 했을 때 커서의 이미지가 바뀌는 것과 헤더의 배경색, 뮤직듣기라는 문구의 색또한 바귀게 해주었습니다. jquery에서 draggable를 사용한다면 드래그 했을 때 이벤트를 쉽게 넣어 줄 수 있습니다.
- start 는 드래그를 시작했을 때, drag는 드래그 중일 때, stop은 드래그를 멈추었을 때를 나타내며 각각 상황에 맞는 이벤트를 추가해 주면 됩니다.
- 그다음은 페이지가 로드 되었을 때 실행되는 함수를 만들어 주었습니다.(onload)
- 마우스 무브일 때 함수는 커서를 만들어 주는 함수입니다.
- 다음은 시간을 알려주는 함수입니다.
- now date 안에 있는 getFullYear,getMonth 등의 데이터를 각각 저장해주고 timeString에 날짜의 형식을 포함해서 적어주었습니다.
- 그리고 그걸 실행시켜주면 됩니다.
- 사실 좀 많이 꼬여 있는데
function printTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const date = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();
const second = now.getSeconds();
const timeString = `${year}년 ${month}월 ${date}일 ${hour}시 ${minute}분 ${second}초`;
$(".time").text(timeString);
setTimeout(printTime, 1000); // 1초마다 업데이트
}- 이걸 onload함수 밖에 써준 뒤 실행문을 onload함수 안에 넣어주면 더욱 간단합니다.
- 그리고 마지막으로 os를 확인하고 알려주는 문구와 모니터의 크기를 알려주는 문구를 써주었습니다.
- os를 확인하는 건 navigator.userAgent 를 사용했고 .toLowerCase를 사용해서 가져온 값을 모두 소문자로 바꿔주었습니다.
- 모니터의 크기는 window.screen.width와 window.screen.height를 사용해서 구했습니다.
- 끝!