인터렉티브 웹 6 - 시간에 따라 배경이 달라지는 시계
2022. 3. 17. 12:20ㆍStudy/Example & Plug-in
HTML
<!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>시간에 따라 달라지는 웹</title>
<script src="https://kit.fontawesome.com/cdd59ed73b.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-2.1.1.min.js" defer></script>
<script src="js/prefixfree.min.js" defer></script>
<script src="js/custom.js" defer></script>
</head>
<body>
<!-- 전체 프레임 -->
<div id="wrap" class="">
<!-- 전체 화면 구름 -->
<img src="img/cloud1.png" />
<img src="img/cloud2.png" />
<!-- 로고 -->
<h1></h1>
<!-- 주 메뉴 -->
<ul id="gnb">
<li><a href="#">About</a></li>
<li><a href="#">Company</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Contact us</a></li>
</ul>
<!-- sns 버튼 -->
<ul id="sns">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-envelope"></i></a></li>
</ul>
<!-- 텍스트 박스 -->
<article>
<p><strong>Lorem</strong> Ipsum</p>
<em>Lorem Ipsum is simply dummy text of the printing Materials</em>
</article>
<!-- 모바일 프레임 -->
<figure>
<p>
<!-- 시계 -->
<span>00</span> : <span>00</span> : <span>00</span>
<!-- 모바일 화면 구름 -->
<img class="cl1" src="img/cloud1.png" />
<img class="cl2" src="img/cloud2.png" />
</p>
</figure>
<!-- 테마 변경 메뉴 -->
<nav>
<ul>
<li class="on"><a href="#"> morning</a></li>
<li><a href="#"> afternoon</a></li>
<li><a href="#"> evening</a></li>
<li><a href="#"> night </a></li>
</ul>
</nav>
</div>
</body>
</html>
CSS
@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);
/* Reset CSS */
* { margin:0; padding:0;}
ol,ul { list-style: none; }
a { outline:0; text-decoration:none; color:#555; }
img { border:0;}
body {font-family:orbitron;}
/*전체 프레임*/
#wrap {position:fixed; left:0; top:0; width:100%; height:100%; min-width:1400px; min-height:780px; background-image:url(../img/bg_morning.jpg); background-size:cover; transition:all 2s;}
/*로고*/
#wrap h1 {position:fixed; left:60px; top:30px; width:90px; height:80px; background-image:url(../img/logo_b.png); background-size:contain; background-repeat:no-repeat; }
/*주메뉴*/
#gnb { position:fixed; right:200px; top:50px;}
#gnb li { float:left; margin-left:30px;}
#gnb li a { font-size:14px; font-weight:bold; color:#555;}
/*sns버튼*/
#sns { position:fixed; right:50px; top:50px;}
#sns li { float:left; margin-left:20px;}
#sns li i { font-size:18px; color:#555;}
/*텍스트 박스*/
article { position:absolute; top:350px; left:150px; width:450px; }
article p { font-size:50px; color:#666;}
article p strong { color:#111;}
article em { font-size:14px; font-style:normal; color:#333;}
/*아이폰*/
figure { position:absolute; right:-300px; top:200px; width:1226px; height:809px; background-image:url(../img/phone_morning.png); transition:all 2s;}
figure p { position:absolute; left:137px; top:100px; width:540px; height:307px; overflow:hidden; font-size:60px; font-weight:bold; color:#333; line-height:4.6; box-sizing:border-box; padding-left:50px;}
figure p span { position:relative; z-index:5;}
/*테마버튼*/
nav { position:fixed; left:6%; bottom:70px; width:88%; }
nav li { float:left; width:25%;}
nav li a {position:relative; display:block; width:98%; height:35px; background:#fff; color:#111; margin:0 auto; padding-left:30px; transition:all 0.5s; font-size:12px; font-weight:bold; line-height:3; letter-spacing:3px; box-sizing:border-box; opacity:0.6; z-index:1; }
nav li:hover a { background:#111; color:#ddd; opacity:0.9; }
/*배경 구름*/
#wrap>img:nth-child(1) { position:absolute; left:-1146px; top:0px; animation:ani1 110s linear infinite; opacity:0.8;}
#wrap>img:nth-child(2) { position:absolute; left:0px; top:20px; animation:ani2 100s linear infinite; opacity:0.8;}
/*모바일 구름*/
figure p img.cl1 {position:absolute; left:-600px; top:30px; width:600px; height:auto; animation:ani3 110s linear infinite; z-index:4;}
figure p img.cl2 {position:absolute; left:0px; top:20px; width:700px; height:auto; animation:ani4 100s linear infinite; z-index:4;}
/*구름 모션*/
@keyframes ani1 {
0%{ left:-1146px;}
100% { left:1950px;}
}
@keyframes ani2 {
0%{ left:0px;}
50% { left:1950px; opacity:0;}
50.001% { left:-1840px; opacity:0.8;}
100% { left:0px;}
}
@keyframes ani3 {
0%{ left:-600px;}
100% { left:540px;}
}
@keyframes ani4 {
0%{ left:0px;}
50% { left:540px; opacity:0;}
50.001% { left:-700px; opacity:1;}
100% { left:0px;}
}
/*아침 테마*/
#wrap.morning { background-image:url(../img/bg_morning.jpg);}
#wrap.morning h1 { background-image:url(../img/logo_b.png);}
#wrap.morning #gnb a { color:#555;}
#wrap.morning #sns i { color:#555;}
#wrap.morning figure { background-image:url(../img/phone_morning.png);}
#wrap.morning article p { color:#666;}
#wrap.morning article p strong { color:#111;}
#wrap.morning article em { color:#333;}
#wrap.morning figure p { color:#333;}
#wrap.morning>img:nth-child(1) { opacity:1;}
#wrap.morning>img:nth-child(2) { opacity:1;}
/*오후 테마*/
#wrap.afternoon { background-image:url(../img/bg_afternoon.jpg);}
#wrap.afternoon h1 { background-image:url(../img/logo_b.png);}
#wrap.afternoon #gnb a { color:#555;}
#wrap.afternoon #sns i { color:#555;}
#wrap.afternoon figure { background-image:url(../img/phone_afternoon.png);}
#wrap.afternoon article p { color:#666;}
#wrap.afternoon article p strong { color:#111;}
#wrap.afternoon article em { color:#333;}
#wrap.afternoon figure p { color:#333;}
#wrap.afternoon>img:nth-child(1) { opacity:1;}
#wrap.afternoon>img:nth-child(2) { opacity:1;}
/*저녁 테마*/
#wrap.evening { background-image:url(../img/bg_evening.jpg);}
#wrap.evening h1 { background-image:url(../img/logo_w.png);}
#wrap.evening #gnb a { color:#fff;}
#wrap.evening #sns i { color:#fff;}
#wrap.evening figure { background-image:url(../img/phone_evening.png);}
#wrap.evening article p { color:#444;}
#wrap.evening article p strong { color:#fff;}
#wrap.evening article em { color:#333;}
#wrap.evening figure p { color:#fff;}
#wrap.evening>img:nth-child(1) { opacity:0.6;}
#wrap.evening>img:nth-child(2) { opacity:0.6;}
/*밤 테마*/
#wrap.night { background-image:url(../img/bg_night.jpg);}
#wrap.night h1 { background-image:url(../img/logo_w.png);}
#wrap.night #gnb a { color:#fff;}
#wrap.night #sns i { color:#fff;}
#wrap.night figure { background-image:url(../img/phone_night.png);}
#wrap.night article p { color:#bbb;}
#wrap.night article p strong { color:#fff;}
#wrap.night article em { color:#888;}
#wrap.night figure p { color:#fff;}
#wrap.night>img:nth-child(1) { opacity:0.1;}
#wrap.night>img:nth-child(2) { opacity:0.1;}
#wrap.night figure p img.cl1 { opacity:0.4;}
#wrap.night figure p img.cl2 { opacity:0.4;}
JS
$(document).ready(function(){
/* 1초 마다 현재 시간값 재설정 */
var timer = setInterval(function(){ // 변수 timer에 setInterval 구문을 실행
var now = new Date();
var hr = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
// 시간이 한자리 숫자일때 앞에 0 붙이기
if(hr >=10){
hNum = hr;
}else{
hNum = "0"+hr;
};
// 분이 한자리 숫자일때 앞에 0 붙이기
if(min >=10){
mNum = min;
}else{
mNum = "0"+min;
};
// 초가 한자리 숫자일때 앞에 0 붙이기
if(sec >=10){
sNum = sec;
}else{
sNum = "0"+sec;
};
// p 태그 안에 시간 출력
$("p span").eq(0).text(hNum);
$("p span").eq(1).text(mNum);
$("p span").eq(2).text(sNum);
},1000) //1초의 시간마다 안쪽의 구문을 반복 실행
var now = new Date();
var hr = now.getHours();
/* 시간에 따라 화면 테마 변경 */
if(hr>=5 && hr<11){ //현재 시간이 5시 보다는 같거나 크고, 11시 보다는 작을때
$("#wrap").removeClass();
$("#wrap").addClass("morning");
$("nav li").removeClass();
$("nav li").eq(0).addClass("on");
}else if(hr>=11 && hr<16){ //현재 시간이 11시 보다는 같거나 크고, 16시 보다는 작을때
$("#wrap").removeClass();
$("#wrap").addClass("afternoon");
$("nav li").removeClass();
$("nav li").eq(1).addClass("on");
}else if(hr>=16 && hr<20){ //현재 시간이 16시 보다는 같거나 크고, 20시 보다는 작을때
$("#wrap").removeClass();
$("#wrap").addClass("evening");
$("nav li").removeClass();
$("nav li").eq(2).addClass("on");
}else if(hr>=20 && hr<25){ //현재 시간이 20시 보다는 같거나 크고, 25시 보다는 작을때
$("#wrap").removeClass();
$("#wrap").addClass("night");
$("nav li").removeClass();
$("nav li").eq(3).addClass("on");
};
// nav 버튼 클릭시 화면 테마 변경
$("nav li").on("click",function(){
var className = $(this).children("a").text();
$("nav li").removeClass();
$(this).addClass("on");
$("#wrap").removeClass();
$("#wrap").addClass(className);
});
});
'Study > Example & Plug-in' 카테고리의 다른 글
| DatePicker (0) | 2024.02.09 |
|---|---|
| 인터렉티브 웹 6 - 가로스크롤 (0) | 2022.03.18 |
| 인터렉티브 웹 5-2 - 3D 회전 플러그인 (0) | 2022.03.17 |
| 인터렉티브 웹 5-2 - 스틸컷 마우스 클릭,드래그 (0) | 2022.03.17 |
| 인터렉티브 웹 5 - 스틸컷 마우스제어 (0) | 2022.03.17 |
