728x90
반응형
[face4 영역 작업]
html mark up
-video: 경로지정해서 영상 삽입 후 뒤에 효과 명령어 넣기
controls: 시작, 정지 버튼이 활성화
muted: 음소거 , muted와 autoplay를 같이 써줘야 autoplay이가 실행이 된다.
.face4 css edit
video size 줄이기
width: 100%
p태그와 em태그를 옆으로 나열하는 방법
1. float(left, right)로 띄워줌 단, 부모태그에 overflow: hidden 이나 clearfix 적용
2. display: inline-block >> 너비값이 있어야함
3. position 으로 위치지정
[.face5 영역 작업]
html markup
.face5 css edit
.pic 이미지 편집
backgroud-size 대신에 backgroud: url 이미지 경로 주소 뒤에 / cover 로 사이즈 조정 가능하다.
top: 100% 위로 올라가서 안보임
hover 시 효과 주기위해 top으로 .reflect 위치 지정
[face6 영역 작업]
html mark up
.face6 css edit
fontawesome 추가
세부 html mark up
.face6 css edit
[face7 영역 작업]
html mark up
.face7 css edit
동영상 크기 편집
object-fit : cover - 이미지, 객체에 써주는 비율 조정
[face8 영역 작업]
html mark up
.face8 css edit
세부 html mark up
css edit
● b태그 : bold 진하게
세부 html mark up
css edit
2번과 3번은 스타일요소가 똑같기 때문에 , 를 넣고 복사해서 3번으로 변경하면 똑같이 스타일이 적용된다.
face 영역을 다 편집했다.
display: none 해놓았던 각 face에 감추기를 해제한다.
모든영역이 겹쳐져있다. face 영역을 회전시켜야함
8각형이기 때문에 45도씩 Y 축으로 회전시킨다.
중간에 원기둥을 넣어서 거리값을 적용해주어야한다.
원의 넓이를 구해야함
원의 넓이 = (원의 반지름 * 원의 반지름)*3.14
w600 * 8 =4800
2R * 3.14 = 4800
R= 764.3312...
중심점에서 Z값 만큼 -764px 띄워줘야한다.
우리는 안쪽에서 바라보는 시점으로 출력해야하기때문에
#circle article 에 backface-visibility: hidden;으로 뒷면을 감추어주어야한다.
animation 적용
<script>
회전하면서 하나당 하나씩 마우스 오버시 멈추게하는 이벤트
이 스크립트는 함수가 필요없기 때문에 따로 스크립트 경로가 필요하지 않다.
●animationPlayState
마우스를 올려놓으면 멈추고 마우스가 떠나가면 다시 애니메이션이 작동한다.
<html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>파노라마 회사소개</title>
<link rel="stylesheet" href="./css/all.min.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<main class="wrap">
<video src="./img/bg.mp4" loop autoplay muted></video>
<!-- circle 8개의 면을 하나로 묶어주는 wrap 역할 -->
<section id="circle">
<article class="face1">
<h2>Co Company</h2>
<div class="inner">
<div>
<p><i class="fa-brands fa-android"></i></p>
<h3>Android</h3>
</div>
<div>
<p><i class="fa-brands fa-apple"></i></p>
<h3>Apple</h3>
</div>
<div>
<p><i class="fa-brands fa-twitter"></i></i></p>
<h3>Twitter</h3>
</div>
<div>
<p><i class="fa-brands fa-facebook"></i></i></p>
<h3>Facebook</h3>
</div>
<div>
<p><i class="fa-brands fa-youtube"></i></p>
<h3>YouTube</h3>
</div>
<div>
<p><i class="fa-brands fa-google"></i></p>
<h3>Google</h3>
</div>
</div>
</article>
<article class="face2">
<h2>What's New</h2>
<div class="inner">
<div>
<h3>New n Articles</h3>
<img src="./img/pattern.jpg" alt="pattern image">
<h4>What is Lorem Ipsum?</h4>
<p>
Lorem: 텍스트 자동 완성 기능<br>
Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numquam recusandae vel quas. <br>Harum, sunt a!
Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numquam recusandae vel quas.<br>Harum, sunt a!
</p>
</div>
</div>
</article>
<article class="face3">
<h2>Member</h2>
<div class="inner">
<div>
<div class="pic"></div>
<div class="con">
<h3>Member Information1</h3>
<p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
<span>2023-07-07</span>
</div>
</div>
<div>
<div class="pic"></div>
<div class="con">
<h3>Member Information2</h3>
<p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
<span>2023-07-07</span>
</div>
</div>
<div>
<div class="pic"></div>
<div class="con">
<h3>Member Information3</h3>
<p>Here comes Member Information contents in detail.Here comes Member Information contents in detail.</p>
<span>2023-07-07</span>
</div>
</div>
</div>
</article>
<article class="face4">
<h2>Advertisment</h2>
<div class="inner">
<div>
<video src="./img/intro.mp4" autoplay loop controls muted></video>
<h3>Promotion</h3>
<p>Here comes Promotion contents in detail.Here comes Promotion contents in detail.<br><br>Here comes Promotion contents in detail.</p>
</div>
<div>
<h3>Information</h3>
<p>Here comes Promotion contents in detail.</p>
<em>2023.07.13</em>
</div>
</div>
</article>
<article class="face5">
<h2>DCODELAB</h2>
<div class="inner">
<div>
<img src="./img/tit.png" alt="DCODELAB">
<div class="pic"></div>
<img src="./img/txt.png" alt="text">
<img src="./img/btn.png" alt="button">
<img src="./img/reflect.png" alt="reflect" class="reflect">
</div>
</div>
</article>
<article class="face6">
<h2>Services</h2>
<div class="inner">
<div>
<i class="fa-solid fa-rss"></i>
<div class="con">
<h3>Network Services</h3>
<p>Here comes Promotion contents in detail.</p>
</div>
</div>
<div>
<i class="fa-solid fa-code"></i>
<div class="con">
<h3>Network Services</h3>
<p>Here comes Promotion contents in detail.</p>
</div>
</div>
<div>
<i class="fa-solid fa-envelope"></i>
<div class="con">
<h3>Customer Services</h3>
<p>Here comes Promotion contents in detail.</p>
</div>
</div>
<div>
<i class="fa-solid fa-list"></i>
<div class="con">
<h3>Network Services</h3>
<p>Here comes Promotion contents in detail.</p>
</div>
</div>
</div>
</article>
<article class="face7">
<h2>Promotion</h2>
<div class="inner">
<div>
<div>
<video src="./img/loop.mp4" autoplay loop muted></video>
<h3>Promote <br>Your<br>Company</h3>
<img src="./img/txt2.png" alt="who's next">
<img src="./img/line.png" alt="2line">
</div>
</div>
</div>
</article>
<article class="face8">
<h2>Temperature</h2>
<div class="inner">
<div>
<h3>Weather</h3>
<i class="fa-solid fa-cloud"></i>
<span>26<em>o</em></span>
</div>
<div>
<i class="fa-solid fa-sun"></i>
<h4>Sunny</h4>
<p>Afternoon temperature</p>
<h5>23<b>o</b></h5>
</div>
<div>
<i class="fa-solid fa-bolt-lightning"></i>
<h4>Lightning</h4>
<p>Night temperature</p>
<h5>18<b>o</b></h5>
</div>
</div>
</article>
</section>
</main>
<script>
const circle = document.querySelector("#circle");
const article = document.querySelectorAll("article");
for(let el of article){
// 마우스를 올려놓으면 이벤트를 발생하겠다. "paused"을
el.addEventListener("mouseenter",(e)=>{
circle.style.animationPlayState = "paused";
});
el.addEventListener("mouseleave",(e)=>{
circle.style.animationPlayState = "running";
});
}
</script>
</body>
</html><css>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');
/* font-family: 'Orbitron', sans-serif; */
*{
margin: 0;
padding: 0;
}
ol,ul,li{
list-style: none;
}
a{
outline: 0;
text-decoration: none;
}
/* body는 바탕화면 */
body{
font: 17px/1.4 "Orbitron";
letter-spacing: 1px;
color: #ddd;
background-color: #000;
}
h3{
font-size: 24px;
}
.wrap{
position: fixed;
width: 100%;
height: 100%;
/* 투영점 */
perspective: 1300px;
}
.wrap > video{
width: 100%;
height: 100%;
/* 너비 높이 강제로 100%로 줬기 때문에 비율 맞추기 */
object-fit: cover;
opacity: 0.5;
}
#circle{
width: 600px;
height: 800px;
position: absolute;
/* border: 1px solid aqua; */
/* 화면 중앙으로 위치하기 */
top: 50%;
left: 50%;
/* 너비,높이값의 1/2 */
margin-top: -400px;
margin-left: -300px;
/* perspective 3d 효과 넣기 위해 지정 */
transform-style: preserve-3d;
animation: ani linear 30s infinite;
}
@keyframes ani{
0%{transform: rotateY(0deg);}
100%{transform: rotateY(360deg);}
}
#circle article{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* background-color: rgba(255, 255, 255, 0.4); */
/* display: none; */
backface-visibility: hidden;
}
#circle article h2{
position: absolute;
left: 0;
top: 0;
font-size: 30px;
opacity: 0;
transition: all 0.5s;
}
#circle article:hover h2{
opacity: 1;
top: -60px;
}
#circle article .inner{
width: 100%;
height: 100%;
}
#circle article .inner > div{
width: 100%;
height: 100%;
border: 1px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
background: rgba(255, 255, 255, 0.06);
padding: 50px;
opacity: 0.7;
/* div 박스안에 다양한 요소의 기준점 */
position: relative;
/* div 박스 안에만 나오게 */
overflow: hidden;
cursor: pointer;
transition: all 0.5s;
}
#circle article .inner > div:hover{
/* 마우스오버시 투명도가 더 진해짐 */
background-color: rgba(255, 255, 255, 0.15);
transform: scale(1.03);
opacity: 1;
}
#circle .inner>div:hover h3{
color: lightcyan;
text-shadow: 0 0 10px aqua;
}
/* face1 */
#circle .face1{
/* display: block; */
}
#circle .face1 .inner>div{
width: 290px;
height: 254px;
float: left;
margin-bottom: 20px;
text-align: center;
}
/* 홀수 div 오른쪽 여백 주기 */
#circle .face1 .inner>div:nth-of-type(2n-1){
margin-right: 20px;
}
#circle .face1 .inner>div h3{
letter-spacing: 2px;
transition: all 0.5s;
font-size: 18px;
}
#circle .face1 .inner>div p{
margin-bottom: 10px;
}
#circle .face1 .inner>div p i{
font-size: 100px;
transition: all .5s;
opacity: 0.7;
}
/* #circle .face1 .inner>div:hover p i{
color: lightcyan;
text-shadow: 0 0 10px aqua;
} */
#circle article .inner>div:hover i{
color: lightcyan;
text-shadow: 0 0 10px aqua;
transform: scale(1.1);
transition: all 0.5s;
}
/* face2 */
#circle .face2{
/* display: block; */
}
#circle .face2 .inner>div{
width: 100%;
height: 100%;
}
#circle .face2 .inner>div h3{
color: #fff;
margin-bottom: 20px;
}
#circle .face2 .inner>div img{
width: 100%;
margin-bottom: 40px;
}
#circle .face2 .inner>div h4{
font-size: 20px;
margin-bottom: 20px;
}
#circle .face2 .inner>div p{
font: 18px/1.4 "arial";
color: #ccc;
text-align: justify;
}
/* face3 */
#circle .face3{}
#circle .face3 .inner > div{
width: 100%;
height: 253px;
margin-bottom: 20px;
overflow: hidden;
}
#circle .face3 .inner > div .pic{
width: 120px;
height: 120px;
/* background-color: rgba(255, 255, 255, 0.5); */
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
border-radius: 50%;
float: left;
border: 1px solid #fff;
}
#circle .face3 .inner > div:nth-of-type(1) .pic{
background-image: url(../img/member1.jpg);
}
#circle .face3 .inner > div:nth-of-type(2) .pic{
background-image: url(../img/member2.jpg);
}
#circle .face3 .inner > div:nth-of-type(3) .pic{
background-image: url(../img/member3.jpg);
}
#circle .face3 .inner > div .con{
float: right;
width: 340px;
}
#circle .face3 .inner > div .con h3{
margin-bottom: 3px;
}
#circle .face3 .inner > div .con p{
font: 18px/1.3 "arial";
color: #ddd;
text-align: justify;
}
#circle .face3 .inner > div .con span{
position: absolute;
bottom: 50px;
right: 50px;
font: 12px/1 "Orbitron";
color: aqua;
opacity: 0.7;
}
/* face4 */
#circle .face4{}
#circle .face4 .inner > div p{
font: 16px/1.3 "arial";
color: #bbb;
margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(1){
width: 100%;
height: 600px;
margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(1) video{
width: 100%;
border: 1px solid #fff;
margin-bottom: 30px;
}
#circle .face4 .inner > div:nth-of-type(1) h3{
margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(2){
width: 100%;
height: 180px;
overflow: hidden;
}
#circle .face4 .inner > div:nth-of-type(2) h3{
margin-bottom: 20px;
}
#circle .face4 .inner > div:nth-of-type(2) p{
float: left;
}
#circle .face4 .inner > div:nth-of-type(2) em{
font-size: 12px;
font-style: normal;
float: right;
}
/* face5 */
#circle .face5{}
#circle .face5 .inner>div{
width: 100%;
height: 100%;
}
#circle .face5 .inner>div img{
margin-bottom: 40px;
}
#circle .face5 .inner>div .pic{
width: 100%;
height: 250px;
background: url(../img/robot.png) no-repeat center center / cover;
margin-bottom: 50px;
}
#circle .face5 .inner>div .reflect{
position: absolute;
top: 100%;
right: 0;
transition: all 0.5s;
}
#circle .face5 .inner>div:hover .reflect{
top: -35%;
}
/* face6 */
#circle .face6{}
#circle .face6 .inner>div{
width: 100%;
height: 185px;
margin-bottom: 20px;
overflow: hidden;
}
#circle .face6 .inner>div i{
width: 22%;
height: 100%;
float: left;
font-size: 50px;
color: #fff;
text-align: center;
line-height: 70px;
border-right: 1px solid #999;
}
#circle .face6 .inner>div .con{
width: 75%;
height: 100%;
float: right;
box-sizing: border-box;
}
#circle .face6 .inner>div p{
font: 18px/1 "arial";
color: #999;
margin-top: 10px;
}
/* face7 */
#circle .face7{}
#circle .face7 .inner>div{
width: 100%;
height: 100%;
}
#circle .face7 .inner>div>div{
height: 100%;
border: 1px solid #aaa;
box-sizing: border-box;
/* div 넘어가는 부분 잘라주기 */
overflow: hidden;
/* h3, img의 기준점 */
position: relative;
}
#circle .face7 .inner>div>div video{
width: 100%;
height: 100%;
/* background 대신 객체나 이미지에 사용하는 비율 조정 */
object-fit: cover;
/* 배너에 동영상 넣을 시에 투명도를 줘서 가독성이 좋다. */
opacity: 0.3;
}
#circle .face7 .inner>div>div h3{
position: absolute;
left: 50px;
top: 130px;
font-size: 40px;
color: #fff;
line-height: 1.3;
}
#circle .face7 .inner>div>div img:nth-of-type(1){
position: absolute;
bottom: 0;
right: -10px;
}
#circle .face7 .inner>div>div img:nth-of-type(2){
position: absolute;
top: -10px;
left: 120px;
width: 80%;
}
/* face8 */
#circle .face8{
display: block;
}
#circle .face8 .inner{
overflow: hidden;
}
#circle .face8 .inner>div:nth-of-type(1){
width: 100%;
height: 400px;
margin-bottom: 20px;
float: left;
}
#circle .face8 .inner>div:nth-of-type(2){
width: 290px;
height: 380px;
margin-right: 20px;
float: left;
text-align: center;
}
#circle .face8 .inner>div:nth-of-type(3){
width: 290px;
height: 380px;
float: left;
text-align: center;
}
#circle .face8 .inner>div:nth-of-type(1) i{
color: #fff;
font-size: 200px;
position: absolute;
bottom: 60px;
left: 50px;
}
#circle .face8 .inner>div:nth-of-type(1) span{
font-weight: bold;
font-size: 120px;
position: absolute;
bottom: 60px;
right: 60px;
}
#circle .face8 .inner>div:nth-of-type(1) span em{
font-size: 60px;
font-family: "arial";
font-style: normal;
position: absolute;
right: -20px;
top: -20px;
}
#circle .face8 .inner>div:nth-of-type(2) i,
#circle .face8 .inner>div:nth-of-type(3) i{
font-size: 120px;
color: #fff;
opacity: 0.8;
margin-bottom: 30px;
}
#circle .face8 .inner>div:nth-of-type(2) h4,
#circle .face8 .inner>div:nth-of-type(3) h4{
font: bold 28px/1 "Orbitron";
margin-bottom: 15px;
}
#circle .face8 .inner>div:nth-of-type(2) p,
#circle .face8 .inner>div:nth-of-type(3) p{
font: 16px/1 "arial";
}
#circle .face8 .inner>div:nth-of-type(2) h5,
#circle .face8 .inner>div:nth-of-type(3) h5{
margin-top: 20px;
font-size: 40px;
position: relative;
/* letter-spacing: -1px; */
}
#circle .face8 .inner>div:nth-of-type(2) h5 b,
#circle .face8 .inner>div:nth-of-type(3) h5 b{
font-size: 20px;
position: absolute;
top: -5px;
right: 48px;
font-family: "arial";
}
#circle .face8 .inner>div:nth-of-type(3) h5 b{
right: 55px;
}
/* 사이드면의 회전 */
.face1{transform: rotateY(0deg) translateZ(-764px);}
.face2{transform: rotateY(45deg) translateZ(-764px);}
.face3{transform: rotateY(90deg) translateZ(-764px);}
.face4{transform: rotateY(135deg) translateZ(-764px);}
.face5{transform: rotateY(180deg) translateZ(-764px);}
.face6{transform: rotateY(225deg) translateZ(-764px);}
.face7{transform: rotateY(270deg) translateZ(-764px);}
.face8{transform: rotateY(315deg) translateZ(-764px);}728x90
반응형
'☭DEVELOPER > #2 웹개발(자바기반 풀스택)' 카테고리의 다른 글
| [JAVACRIPT]document.write / Data Type (0) | 2023.07.17 |
|---|---|
| 비주얼 스튜디오 코드 77_ 뮤직 플레이어 (0) | 2023.07.14 |
| [JAVA]JAVA 자료형 (0) | 2023.07.12 |
| 비주얼 스튜디오 코드_75 animation (1) | 2023.07.12 |
| 비주얼 스튜디오 코드 74_ 하이시네마 footer (0) | 2023.07.11 |
