웹개발/덕질 사이트 만들기

[덕질하는 웹개발자] 츠카사 사이트 만들기 4일차 | 애니메이션

KwonYongHyeon 2021. 1. 20. 21:34

별건 아니고(정말 별거 아님) 오늘은 간단한 애니메이션 효과를 추가해 줬다.

대충 클래스를 만들어서 할까 했는데 그러면 클래스 속성 주는 작업이 너무 노가다(???)여가지고 그냥 p에다가 슬라이드인 효과를 줬다.

 

대충 소스 코드 공개

 

index.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>由崎 司</title>
	<link rel="shortcut icon" type="image⁄x-icon" href="top.png">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id='header'>
		<div id='logo'>
			<p class='logo_style'><a href="index.html" style="color: black;">由崎 司 _ fansite</a></p>
		</div>
		<div id='music'>
			<center><p class='lang'>[BGM] Yunomi - ⽉と星空</p></center>
			<br>
			<center>
				<audio autoplay controls>
					<source src="bgmusic.mp3" type="audio/mp3" allow="autoplay" id="audio">
				</audio>
			</center>
		</div>
		<br>
		<div id='lang'>
			<p class="lang">Menu</p>
			<ul>
				<li><a href = 'funfacts.html' style="color: black;">Fun Facts about Tsukasa</a></li>
			</ul>
			<br>
			<p class='lang'>Language</p>
			<ul>
				<li><a href = 'index.html' style="color: black;">English</a></li>
			</ul>
			<br>
			<p class='lang'>Developers</p>
			<ul>
				<li>Developed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Designed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Music by <a href = 'https://www.youtube.com/c/Yunomichannel/featured' target="_blank" style="color: black;">Yunomi</a></li>
				<li>Ads by <a href = 'https://tenping.kr/' target="_blank" style="color: black;">Tenping</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/kitoakari_1016' target="_blank" style="color: black;">鬼頭 明里</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/hatakenjiro' target = "-blank" style="color: black;">畑 健二郎</a></li>
				<li>Special Thanks to <a href = 'https://www.youtube.com/channel/UC-3q6G9q5GsOY2VpC5_LoRQ?app=desktop' target="_blank" style="color: black;">amous</a></li>
			</ul>
		</div>
	</div>
	<div id='contents'>
		<div id='image'>
			<center><img id="cim" src="top.png"></img></center>
			<center><img id="mim" src="mobile.jpg"></center>
		</div>
		<div id='in'>
			<p class='in' class="slidein">Name: 由崎 司(Yuzaki Tsukasa)</p>
			<p class='in' class="slidein">Spouse: 由崎 星空(Yuzaki Nasa)</p>
			<p class='in' class="slidein">Age: 16</p>
			<p class='in' class="slidein">Birthday: April 3rd</p>
			<p class='in' class="slidein">Country: Japan</p>
			<p class='in' class="slidein">Height: 154cm / 5.05249ft</p>
			<p class='in' class="slidein">Weight: 41kg / 90.3895lbs</p>
			<p class='in' class="slidein">Bloodtype: O</p>
			<p class='in' class="slidein">Hobby: watching movies / playing games</p>
		</div>
	</div>
	<div id="footer">
		<p class="copyright">Copyright ⓒ 2020. All Rights Reserved.</p>                                    
	</div>
</body>
</html>

 

 

 

funfacts.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>由崎 司</title>
	<link rel="shortcut icon" type="image⁄x-icon" href="top.png">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id='header'>
		<div id='logo'>
			<p class='logo_style'><a href="index.html" style="color: black;">由崎 司 _ fansite</a></p>
		</div>
		<div id='music'>
			<center><p class='lang'>[BGM] Yunomi - ⽉と星空</p></center>
			<br>
			<center>
				<audio autoplay controls>
					<source src="bgmusic.mp3" type="audio/mp3" allow="autoplay" id="audio">
				</audio>
			</center>
		</div>
		<br>
		<div id='lang'>
			<p class="lang">Menu</p>
			<ul>
				<li><a href = 'funfacts.html' style="color: black;">Fun Facts about Tsukasa</a></li>
			</ul>
			<br>
			<p class='lang'>Language</p>
			<ul>
				<li><a href = 'index.html' style="color: black;">English</a></li>
			</ul>
			<br>
			<p class='lang'>Developers</p>
			<ul>
				<li>Developed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Designed by <a href = 'https://coderyh.tistory.com/' target="_blank" style="color: black;">권용현</a></li>
				<li>Music by <a href = 'https://www.youtube.com/c/Yunomichannel/featured' target="_blank" style="color: black;">Yunomi</a></li>
				<li>Ads by <a href = 'https://tenping.kr/' target="_blank" style="color: black;">Tenping</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/kitoakari_1016' target="_blank" style="color: black;">鬼頭 明里</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/hatakenjiro' target = "-blank" style="color: black;">畑 健二郎</a></li>
				<li>Special Thanks to <a href = 'https://www.youtube.com/channel/UC-3q6G9q5GsOY2VpC5_LoRQ?app=desktop' target="_blank" style="color: black;">amous</a></li>
			</ul>
		</div>
	</div>
	<div id='contents'>
		<div id='in'>
			<p class='in'>1. She's cute.</p>
			<p class='in'>2. She's voice actor is 鬼頭 明里.</p>
			<p class='in'>3. She is a big fan of Marvel series.</p>
			<p class='in'>4. She always wears a barrette on the back of her head, made of deer skin.</p>
			<p class='in'>5. Before marrying Nasa, Tsukasa's name was 月読 司(Tsukuyomi Tsukasa).</p>
			<p class='in'>6. Tsukasa calls Nasa 'Husband' or 'Nasa Gun.'</p>
			<p class='in'>7. When asked, "Which animal do you want if you can get any animal as a pet?" she chose a turtle, "Because turtles live long."</p>
			<div style="display:inline-block; width:100%; text-align:center;"><div style="display:inline-block;"><div style="margin:10px; padding:15px; background:#fff; border:1px solid #dae2e3;"><div style="width:100%; max-width:800px;"><a href="http://iryan.kr/t6n96816ur" target="_blank"><img src="http://img.tenping.kr/Content/Upload/Images/2021010816290003_Dis_20210108170139.jpg" width="100%" style="width:100%; height:auto; border-radius:0;" alt=""></a></div><div style="margin:10px;"><div style="margin:5px 0; color:#333; font-size:16px; line-height:1.4em; height:2.6em; display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; font-weight:300; text-align:left; overflow:hidden; max-width:400px;">[해커스경찰] 2022년 경찰 합격전략 설명회</div></div><div style="width:100%; margin:20px 0 5px; background-color:#f5fbff; text-align:left;"><a href="http://iryan.kr/t6n96816ur" target="_blank" style="text-decoration:none; display:block;"><div style="padding:17px 0; background-color:#dcf3ff;"><div style="line-height:1.4; margin:0; padding:0 0 0 20px; color:#234f83; font-size:21px; font-weight:300; display:inline-block;">상담 신청하기</div><div style="margin-right:20px; margin-top:-6px; float:right; display:inline-block; color:#234f83; font-size:30px; font-weight:300;">»</div></div></a></div></div></div></div>                                        
		</div>                                  
	</div>
	<div id="footer">
		<p class="copyright">Copyright ⓒ 2020. All Rights Reserved.</p>                                    
	</div>
</body>
</html>

 

 

 

style.css

@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Noto+Sans+JP:wght@300&family=Noto+Serif+JP:wght@600&display=swap');

#header {
	width: 400px;
	height: 1000px;
	float: left;
	background-color: #edacb1;
	margin: 5px;
	border: 3px solid black;
}

#logo {
	width: 90%;
	height: 10%;
	background-color: #edacb1;
	float: left;
	margin: 30px;
}

#music {
	width: 90%;
	height: 20%;
	background-color: #edacb1;
	float: left;
	margin: 5px;
}

#lang {
	width: 90%;
	height: 50%;
	background-color: #edacb1;
	float: left;
	margin: 5px;
}

#contents {
	width: 1070px;
	height: 1000px;
	float: left;
	background-color: #edacb1;
	margin: 5px;
	border: 3px solid black;
}

#image {
	width: 1024px;
	height: 500px;
	float: center;
	margin: 28px;
	background-color: white;
}

#in {
	width: 1020px;
	height: 400px;
	float: center;
	margin: 50px;
	background-color: #edacb1;
}

#footer {
	width: 1487px;
	height: 60px;
	margin: 5px;
	background-color: #edacb1;
	float: left;
	border: 3px solid black;
}

#cim {
	display: block;
}

#mim {
	display: none;
}

.logo_style {
	font-family: 'Noto Serif JP', serif;
	color: black;
	font-size: 30px;
}

.song {
	color: black;
	font-family: 'Kosugi', sans-serif;
	text-align: center;
}

.lang {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
}

.in {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: left;
	display: flex;
}

.copyright {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
}

p {
  animation-duration: 3s;
  animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

ul {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Noto Sans JP', sans-serif;
}

a { 
	text-decoration:none 
}

img {
	display: inline-block;
	width: 1024px;
	height: 500px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#header {
		width: 96%;
		height: 120%;
	}

	#logo {
		width: 80%;
	}

	#lang {
		margin: 7px;
	}

	#cim {
		display: none;
	}

	#mim {
		display: block;
	}

	#image {
		width: 370px;
		height: 537px;
		float: center;
		margin: 5px;
		background-color: white;
	}

	#contents {
		width: 96%;
	}

	#in {
		width: 60%;
	}

	#footer {
		width: 96%;
	}

	.logo_style {
		text-align: center;
	}

	img {
		display: inline-block;
		width: 370px;
		height: 537px;
	}
}

 

사실 css만 조금 추가한ㄱ...

 

뭐 암튼 완성물은 이렇다.

 

 

전보다 훨씬 간-지나게 되었다.

 

 

저작자표시

'웹개발 > 덕질 사이트 만들기' 카테고리의 다른 글

[덕질하는 웹개발자] 츠카사 사이트 만들기 3일차 | 메뉴바, 광고 넣기  (0) 2021.01.16
[덕질하는 웹개발자] 츠카사 사이트 만들기 2일차 | 반응형 웹사이트  (0) 2021.01.01
[덕질하는 웹개발자] 츠카사 사이트 만들기 1일차 | html, css  (0) 2020.12.30

'웹개발/덕질 사이트 만들기'의 다른글

  • 현재글[덕질하는 웹개발자] 츠카사 사이트 만들기 4일차 | 애니메이션

관련글

댓글

티스토리툴바